/* 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}

.iphone-route .header-call-btn,.iphone-route .header-logout-btn{width:36px;height:36px;min-width:36px;padding:0;font-size:17px}

.iphone-route .chat-name-row{display:flex;align-items:center;gap:6px;min-width:0}
.iphone-route .chat-name-row h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iphone-route .chat-name-row .header-call-btn{width:30px;height:30px;min-width:30px;border-radius:9px;font-size:14px}
.iphone-route .message-input-wrap textarea{padding-right:73px!important}
.iphone-route .sticker-btn-inline{right:37px;bottom:9px;width:28px;height:28px;min-width:28px!important;min-height:28px!important;font-size:17px}

/* Combined emoji/sticker panel uses the single emoji button */
.iphone-route .message-input-wrap textarea{padding-right:43px!important}
.iphone-route .composer-picker-modes{padding:7px 8px}
.iphone-route .composer-picker-mode{min-height:32px;font-size:12px}

.iphone-route .chat-theme-overlay{padding:8px}.iphone-route .chat-theme-card{max-height:94dvh}

.iphone-route .header-actions{display:flex;align-items:center;gap:4px}.iphone-route .header-actions .header-call-btn{position:static;margin:0}

.iphone-route .chat-profile-button{min-width:0;max-width:calc(100% - 116px)}.iphone-route .user-profile-large-photo{width:128px;height:128px}

.iphone-route .emoji-search-wrap{margin:6px 8px 4px;padding:7px 9px;}
.iphone-route .emoji-search-input{font-size:16px;}

.pinned-message-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(30,64,175,.10);color:inherit}.pinned-message-bar.hidden{display:none!important}.pinned-message-bar>button{border:0;background:transparent;color:inherit;cursor:pointer}.pinned-message-bar>button:nth-child(2){flex:1;text-align:left;display:flex;flex-direction:column;min-width:0}.pinned-message-bar strong{font-size:12px}.pinned-message-bar small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.78}.pinned-message-bar>button:last-child{font-size:20px}.pinned-highlight .message-bubble{outline:2px solid #f59e0b;outline-offset:3px}

.login-sessions-btn{width:auto;max-width:165px;margin:0 10px 9px;padding:7px 9px;border:1px solid var(--line,#283955);border-radius:10px;background:rgba(255,255,255,.04);color:inherit;display:inline-flex;align-items:center;gap:6px;text-align:left;font-size:11px;line-height:1}.login-sessions-btn>span:first-child{font-size:13px}.login-sessions-btn strong{display:block;white-space:nowrap}
.login-sessions-overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:end center;padding:12px;background:rgba(2,8,20,.7)}.login-sessions-overlay.hidden{display:none}.login-sessions-card{width:100%;max-height:78vh;overflow:auto;padding:17px;border:1px solid var(--line,#2b3d5d);border-radius:20px 20px 12px 12px;background:var(--panel,#0d1728);color:var(--text,#eef4ff)}.login-sessions-header{display:flex;justify-content:space-between;gap:12px}.login-sessions-header button{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:inherit;font-size:22px}.login-sessions-help{color:var(--muted,#9aabc6);font-size:12px}.login-sessions-list{display:grid;gap:8px}.login-session-row{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line,#283955);border-radius:13px;background:rgba(255,255,255,.035)}.login-session-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(96,165,250,.16);font-weight:800}.login-session-row strong,.login-session-row small{display:block}.login-session-row small{margin-top:2px;color:var(--muted,#9aabc6);font-size:11px}.login-sessions-empty{text-align:center;color:var(--muted,#9aabc6)}

/* iPhone story utility controls */
.account-utility-row{display:flex;align-items:center;gap:6px;margin:0 10px 9px;flex-wrap:nowrap}
.account-utility-row .login-sessions-btn{margin:0;max-width:150px;min-width:0}
.story-manage-btn{margin:0;padding:7px 9px;max-width:105px;font-size:11px;white-space:nowrap}
.story-manage-btn>span:first-child{font-size:13px}.story-manage-btn strong{font-size:11px}
\n\n/* iPhone Story composer containment */
.iphone-route .story-compose-card{width:100%;max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);overflow:auto}
.iphone-route .story-drop-zone{height:clamp(270px,46dvh,450px)}
.iphone-route .story-compose-actions{justify-content:flex-end;padding-right:max(2px,env(safe-area-inset-right));padding-left:max(2px,env(safe-area-inset-left))}
.iphone-route .story-hd-option{padding:4px 7px}

/* Story text editing controls tuned for iPhone */
.iphone-route .story-text-tools{gap:4px;flex-wrap:nowrap}
.iphone-route .story-tool-main{min-width:72px;padding:6px}
.iphone-route .story-tool-group button{padding:6px}
.iphone-route .story-tool-group span{min-width:25px;padding:0 2px}
.iphone-route .story-font-menu{left:0;right:auto;width:min(260px,calc(100vw - 28px))}


/* Story reply controls - iPhone */
.story-interaction-bar{left:10px;right:10px;bottom:max(12px,env(safe-area-inset-bottom));gap:7px}
.story-like-btn{width:40px;height:40px;flex-basis:40px;font-size:26px}
.story-reply-box{padding:4px}
.story-reply-box input{font-size:16px!important;padding:6px 8px!important}
.story-reply-box button{padding:6px 10px;font-size:12px}
.story-reply-preview{max-width:245px}
.story-reply-thumb{width:44px;height:56px;flex-basis:44px}
.story-reply-meta span{max-width:155px}


/* Instagram-style auto-growing composer on iPhone */
.iphone-route .message-input-wrap textarea{
  height:48px;
  min-height:48px!important;
  max-height:112px!important;
  overflow-y:hidden;
  resize:none!important;
  field-sizing:fixed!important;
  transition:height .08s ease;
}