/* iPhone-optimized route: /iphone/ */
:root {
  --iphone-header-h: 72px;
  --iphone-composer-h: 76px;
}

html,
body.iphone-route {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overscroll-behavior: none;
  background: var(--bg);
}

body.iphone-route {
  position: fixed;
  inset: 0;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

.iphone-route .app-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: block;
}

.iphone-route .chat-layout {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  grid-template-columns: 1fr;
}

.iphone-route .sidebar,
.iphone-route .chat-panel {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.iphone-route .dashboard-brand {
  padding-top: max(12px, env(safe-area-inset-top));
}

.iphone-route .sidebar {
  overflow: hidden;
}

.iphone-route .conversation-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.iphone-route .conversation-item {
  min-height: 72px;
  margin-inline: 8px;
  border-radius: 16px;
}

.iphone-route .conversation-open {
  min-width: 0;
  padding: 12px;
}

.iphone-route .conversation-preview {
  max-width: calc(100vw - 140px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iphone-route .chat-panel {
  display: none;
  grid-template-rows: auto minmax(0,1fr) auto auto auto auto;
  overflow: hidden;
  background: var(--panel);
}

.iphone-route .chat-layout.mobile-chat-open .chat-panel {
  display: grid;
}

.iphone-route .chat-layout.mobile-chat-open .sidebar {
  display: none;
}

.iphone-route .chat-header {
  min-height: var(--iphone-header-h);
  padding:
    max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    8px
    max(10px, env(safe-area-inset-left));
  gap: 8px;
  flex: 0 0 auto;
  z-index: 5;
}

.iphone-route .mobile-back {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 16px;
  font-size: 25px;
}

.iphone-route .chat-person {
  min-width: 0;
  flex: 1;
  gap: 9px;
}

.iphone-route .header-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.iphone-route .chat-person > div:last-child {
  min-width: 0;
}

.iphone-route .chat-header h2 {
  max-width: 46vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
}

.iphone-route .status-text {
  max-width: 48vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iphone-route .header-actions {
  flex: 0 0 auto;
}

.iphone-route .close-tab-btn,
.iphone-route .header-menu-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
}

.iphone-route .message-list {
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  padding:
    14px
    max(12px, env(safe-area-inset-right))
    18px
    max(12px, env(safe-area-inset-left));
  gap: 8px;
}

.iphone-route .message-row {
  width: 100%;
}

.iphone-route .message-wrap {
  max-width: 88%;
  gap: 4px;
}

.iphone-route .message-bubble {
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.iphone-route .message-row.mine .message-bubble {
  border-bottom-right-radius: 5px;
}

.iphone-route .message-row:not(.mine) .message-bubble {
  border-bottom-left-radius: 5px;
}

.iphone-route .message-more {
  opacity: 1;
  flex: 0 0 28px;
  width: 28px;
  height: 34px;
  padding: 2px;
}

.iphone-route .chat-media {
  width: auto;
  max-width: min(76vw, 360px);
  max-height: 48dvh;
  border-radius: 14px;
}

.iphone-route .voice-note {
  width: min(70vw, 310px);
  max-width: 100%;
}

.iphone-route .reply-preview,
.iphone-route .attachment-preview,
.iphone-route .recording-bar {
  flex: 0 0 auto;
}

.iphone-route .message-composer {
  position: relative;
  z-index: 6;
  grid-template-columns: 48px minmax(0,1fr) 48px auto;
  align-items: end;
  gap: 7px;
  min-height: var(--iphone-composer-h);
  padding:
    10px
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

.iphone-route .message-composer textarea {
  width: 100%;
  min-width: 0;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 96px !important;
  padding: 12px 13px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 22px;
  resize: none;
}

.iphone-route .attach-btn,
.iphone-route .record-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 16px;
}

.iphone-route .send-btn {
  min-width: 72px;
  min-height: 48px;
  height: 48px;
  padding-inline: 16px;
  border-radius: 16px;
  font-size: 16px;
}

.iphone-route .toast {
  top: max(12px, env(safe-area-inset-top));
  width: calc(100% - 28px);
  max-width: 430px;
  text-align: center;
}

.iphone-route .message-menu,
.iphone-route .clear-menu,
.iphone-route .conversation-menu {
  max-width: calc(100vw - 20px);
}

/* Compact login that fits without Safari page scrolling. */
.iphone-route .auth-card.coaching-login {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  display: grid;
  align-content: center;
}

.iphone-route .coaching-banner,
.iphone-route .login-panel {
  min-width: 0;
}

@media (max-width: 390px) {
  .iphone-route .chat-header h2 { max-width: 40vw; }
  .iphone-route .status-text { max-width: 42vw; }
  .iphone-route .message-composer {
    grid-template-columns: 44px minmax(0,1fr) 44px 66px;
    gap: 6px;
    padding-inline: 8px;
  }
  .iphone-route .attach-btn,
  .iphone-route .record-btn {
    width: 44px;
    min-width: 44px;
  }
  .iphone-route .send-btn {
    min-width: 66px;
    padding-inline: 10px;
  }
}

@supports (-webkit-touch-callout: none) {
  .iphone-route .chat-layout,
  .iphone-route .auth-card.coaching-login {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }
}


/* iPhone Pro Safari refinements (390–430 CSS px class) */
@supports (height: 100svh) {
  .iphone-route .chat-layout,
  .iphone-route .auth-card.coaching-login {
    height: 100svh;
    min-height: 100svh;
  }
}
@supports (height: 100dvh) {
  .iphone-route .chat-layout,
  .iphone-route .auth-card.coaching-login {
    height: 100dvh;
    min-height: 100dvh;
  }
}
@media (min-width:390px) and (max-width:430px) {
  .iphone-route .chat-header {
    padding-top:max(10px,env(safe-area-inset-top));
  }
  .iphone-route .message-list {
    scroll-padding-bottom:calc(var(--iphone-composer-h) + env(safe-area-inset-bottom) + 12px);
  }
  .iphone-route .message-bubble {max-width:min(84vw,340px)}
  .iphone-route .message-composer textarea {font-size:16px}
}
@media (orientation:landscape) and (max-height:500px) {
  .iphone-route .chat-header{min-height:58px;padding-top:max(4px,env(safe-area-inset-top))}
  .iphone-route .message-composer{min-height:64px}
}


/* iPhone Safari emoji control */
.iphone-route .emoji-btn{min-width:38px;min-height:42px;padding:0;border-radius:11px;font-size:18px;flex:0 0 auto}
.iphone-route .emoji-picker{padding-bottom:calc(8px + env(safe-area-inset-bottom));}


/* Preserve the original iPhone composer width; emoji sits inside the text field */
.iphone-route .message-composer{grid-template-columns:48px minmax(0,1fr) 48px auto!important;}
.iphone-route .message-input-wrap{position:relative;min-width:0;width:100%;}
.iphone-route .message-input-wrap textarea{width:100%;padding-right:38px!important;}
.iphone-route .emoji-btn-inline{position:absolute;right:7px;bottom:9px;width:28px;height:28px;min-width:28px!important;min-height:28px!important;padding:0;border:0!important;background:transparent!important;border-radius:50%;font-size:16px;}

/* iPhone Safari expanded emoji picker */
.iphone-route .emoji-picker{width:calc(100vw - 12px);max-width:390px;border-radius:18px;padding:0 0 env(safe-area-inset-bottom)}
.iphone-route .emoji-grid{grid-template-columns:repeat(7,1fr);max-height:min(42vh,310px);padding:7px}
.iphone-route .emoji-grid .emoji-item{height:39px;font-size:23px}
.iphone-route .emoji-tabs{padding-inline:7px}
.iphone-route .emoji-btn-inline{font-family:Arial,sans-serif;color:#667085;font-size:18px!important}


/* Settings dropdown on iPhone Safari */
.settings-overlay{position:fixed!important;inset:0!important;display:block!important;background:transparent!important;backdrop-filter:none!important;padding:0!important;z-index:10000!important}
.settings-overlay.hidden{display:none!important}
.settings-card{position:fixed!important;top:calc(env(safe-area-inset-top) + 58px)!important;right:10px!important;left:auto!important;bottom:auto!important;width:calc(100vw - 20px)!important;max-height:calc(100dvh - env(safe-area-inset-top) - 76px - env(safe-area-inset-bottom))!important;border-radius:17px!important;overflow:auto!important;padding-bottom:max(4px,env(safe-area-inset-bottom))!important}