/* One phone page at a time, shared controls in Standard and Mint. */
.chat-screen { max-width: 56rem; margin: 0 auto; min-width: 0; color: var(--text, #e5ebf4); }
.chat-screen [hidden], .chat-top-button[hidden], .chat-social-badge[hidden] { display: none !important; }
.chat-heading { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.6rem; }
.chat-heading h1 { font-size:1.45rem; margin:0; overflow-wrap:anywhere; }
.chat-screen p { margin:.55rem 0; }
.chat-screen .btn, .chat-screen button, .chat-screen summary, .chat-top-button { min-height:44px; min-width:44px; }
/* Standard's dense global button rule uses a 26px painted strip and negative
   touch padding. Chat needs visible, non-overlapping kit buttons on both pointers. */
#app.concept-std main.game-main .chat-screen .st-btn { box-sizing:border-box; height:auto; min-height:44px; margin:0; padding:6px 8px; border:1px solid var(--st-line); background-clip:border-box; }
.concept-std main.game-main .chat-screen .st-btn--primary { border-color:var(--st-accent); }
.chat-screen .chat-toolbar .st-btn { font-size:.75rem; }
.chat-screen a, .chat-screen button { touch-action:manipulation; }
.chat-screen :focus-visible, .chat-top-button:focus-visible { outline:3px solid var(--accent,#65d8e1); outline-offset:2px; }
.chat-notice:empty { display:none; }
.chat-notice { padding:.6rem; border-left:3px solid var(--accent,#65d8e1); background:var(--surface-2,#182a40); }
.chat-rooms { display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem; margin:.5rem 0; min-width:0; }
.chat-room-group, .chat-requests { min-width:0; }
.chat-room-group h2, .chat-requests h2 { margin:0 0 .25rem; color:var(--muted,#b2c0d4); font-size:.75rem; font-weight:650; }
.chat-room { display:flex; align-items:center; gap:.5rem; border-bottom:1px solid var(--border,#42536c); padding:.3rem .25rem; min-height:44px; min-width:0; box-sizing:border-box; color:inherit; text-decoration:none; }
.chat-room:hover { background:var(--panel-2,#132136); text-decoration:none; }
.chat-room__body { display:flex; align-items:baseline; min-width:0; flex:1; gap:.45rem; white-space:nowrap; }
.chat-room__body strong { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.chat-room__body small { font-size:.7rem; flex-shrink:0; }
.chat-screen .st-icon { width:18px; height:18px; flex-shrink:0; color:currentColor; }
.chat-room__icon { color:var(--accent,#65d8e1); }
.chat-room small, .chat-preview, .chat-retention, .chat-count { color:var(--muted,#b2c0d4); }
.chat-preview { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-unread, .chat-social-badge { background:var(--accent,#65d8e1); color:var(--bg,#07111c); border-radius:20px; padding:.15rem .45rem; font-weight:700; font-size:.8rem; }
.chat-social-badge { position:absolute; top:0; right:0; }
.st-nav a, .cm-nav a { position:relative; }
.chat-top-button { display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; padding:.35rem; color:var(--accent,#65d8e1); background:var(--surface,#132136); border:1px solid var(--border,#42536c); border-radius:6px; text-decoration:none; flex:none; }
.chat-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.5rem 0; }
.chat-content { min-width:0; }
.chat-log { height:clamp(200px,40dvh,440px); overflow-y:auto; overscroll-behavior:contain; padding:.3rem .5rem; border:1px solid var(--border,#42536c); border-radius:8px; overflow-wrap:anywhere; scroll-padding-bottom:1rem; }
.chat-message { padding:.25rem 0 .5rem; border-top:1px solid var(--border,#42536c); }
.chat-message:first-child { border:0; }
.chat-message__by { display:flex; gap:.35rem; align-items:center; flex-wrap:nowrap; min-width:0; font-weight:600; }
.chat-message__by .chat-message__name { min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:44px; display:block; line-height:44px; }
.chat-message__by img { border-radius:50%; object-fit:cover; width:18px; height:18px; flex-shrink:0; }
.chat-message__empire { min-width:0; flex:0 2 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted,#b2c0d4); font-weight:400; font-size:.7rem; }
.chat-message__by time { font-size:.65rem; white-space:nowrap; flex-shrink:0; color:var(--muted,#b2c0d4); margin-left:auto; font-weight:400; }
.chat-message__staff { font-size:.65rem; }
.chat-avatar { font-size:1.1rem; width:18px; flex-shrink:0; color:var(--accent,#65d8e1); }
.chat-screen .chat-message__text { margin:0 0 .1rem; padding-left:calc(18px + .35rem); white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; }
.chat-message__menu { position:relative; flex:0 0 44px; align-self:flex-start; }
.chat-message__menu summary { display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.3rem; color:var(--accent,#65d8e1); list-style:none; border-radius:4px; }
.chat-message__menu summary::-webkit-details-marker, .chat-privacy summary::-webkit-details-marker { display:none; }
.chat-message__menu summary:hover { background:var(--panel-2,#132136); }
.chat-message__actions { position:absolute; right:0; z-index:4; display:grid; gap:.25rem; min-width:10rem; padding:.35rem; background:var(--panel-2,#132136); border:1px solid var(--border,#42536c); border-radius:6px; box-shadow:0 4px 16px #0008; }
.chat-message__actions:popover-open { position:fixed; inset:auto; margin:0; color:var(--text,#e5ebf4); }
@supports selector(:popover-open) { .chat-message__actions[popover]:not(:popover-open) { display:none; } }
.chat-message__actions .btn { justify-content:flex-start; }
.chat-message--continuation { border:0; padding-top:0; position:relative; min-height:44px; }
.chat-message--continuation .chat-message__by { float:right; }
.chat-message--continuation .chat-message__name, .chat-message--continuation .chat-message__empire, .chat-message--continuation .chat-message__staff { position:absolute; width:1px; height:1px; min-height:0; overflow:hidden; clip-path:inset(50%); }
.chat-message--continuation .chat-avatar, .chat-message--continuation .chat-message__by img { display:none; }
.chat-message--continuation .chat-message__name:focus-visible { position:static; width:auto; height:44px; clip-path:none; }
.chat-message--continuation .chat-message__text { padding-top:.65rem; }
.chat-screen .chat-message__report { margin:.2rem 0 .1rem calc(18px + .35rem); }
/* The Discord bridge: the room banner, and the badge a line keeps even from a linked player. */
.chat-bridge { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .35rem; margin:0 0 .25rem; padding:.25rem .5rem; font-size:.75rem; border-left:3px solid var(--accent,#65d8e1); background:var(--surface-2,#182a40); }
.chat-bridge--delayed { border-left-color:var(--amber,#e0b040); }
.chat-bridge svg { flex-shrink:0; }
.chat-message__origin { display:inline-flex; align-items:center; flex-shrink:0; color:var(--muted,#b2c0d4); }
.chat-message__origin svg { display:block; }
.chat-avatar svg { display:block; }
.chat-message--continuation::after { content:''; display:block; clear:both; }
.chat-message--removed { color:var(--muted,#b2c0d4); }
.chat-composer { position:relative; background:var(--bg,#08111f); padding:.5rem 0; z-index:2; }
.chat-composer label { display:block; font-weight:600; margin-bottom:.3rem; }
.chat-composer textarea, .chat-dialog textarea, .chat-dialog select, .chat-content > textarea { width:100%; box-sizing:border-box; font:inherit; color:inherit; background:var(--surface,#132136); border:1px solid var(--border,#42536c); border-radius:6px; padding:.6rem; min-height:60px; }
/* VEGA in the Help room: how to ask, above the box it is asked in, and the line a question waits under. */
.chat-vega-ask { margin:0 0 .5rem; padding:.4rem .5rem; border-left:3px solid var(--accent,#68a0ff); font-size:.8rem; }
.chat-composer .chat-vega-auto { display:flex; align-items:center; gap:.5rem; min-height:44px; font-weight:400; cursor:pointer; }
.chat-vega-auto input { flex:0 0 auto; width:auto; }
.chat-screen .chat-vega-ask p { margin:0 0 .35rem; max-width:65ch; }
/* With the keyboard up the box and the newest lines have the screen: how to ask has done its job. */
@media (max-width:600px) { .chat-composer:has(textarea:focus) .chat-vega-ask { display:none; } }
.chat-vega-status { margin:.25rem 0; font-size:.75rem; color:var(--muted,#b2c0d4); }
.chat-message__ai { flex-shrink:0; padding:0 .3rem; font-size:.65rem; line-height:1.4; border:1px solid var(--border,#42536c); border-radius:3px; color:var(--muted,#b2c0d4); }
.chat-composer__entry { display:flex; align-items:stretch; gap:.5rem; }
.chat-composer__entry textarea { min-width:0; flex:1; resize:vertical; }
.chat-composer__entry .chat-send { flex-shrink:0; align-self:stretch; }
.chat-composer__meta { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-top:.25rem; font-size:.7rem; }
.chat-composer__meta small { font-size:inherit; color:var(--muted,#b2c0d4); }
.chat-count { margin-left:auto; text-align:right; font-size:.7rem; }
.chat-privacy, .chat-retention { font-size:.75rem; color:var(--muted,#b2c0d4); }
.chat-privacy summary { display:flex; align-items:center; gap:.35rem; cursor:pointer; list-style:none; width:fit-content; font-size:.7rem; }
.chat-privacy summary span { white-space:nowrap; }
.chat-privacy p { max-width:65ch; }
.chat-requests { margin:.5rem 0; }
.chat-screen .chat-requests p { margin:.35rem 0; font-size:.75rem; color:var(--muted,#b2c0d4); }
.chat-screen .chat-intro { margin:.35rem 0; }
.chat-settings label { display:block; margin:.6rem 0; }
.chat-settings select { min-height:44px; max-width:100%; font:inherit; }
.chat-settings fieldset { margin:1rem 0; border:1px solid var(--border,#42536c); }
.chat-settings input[type=checkbox] { width:22px; height:22px; vertical-align:middle; margin-right:.5rem; }
.chat-settings .chat-visibility-select { display:block; width:100%; }
.chat-settings .chat-privacy-copy { font-size:.85rem; line-height:1.5; }
@media (max-width:480px) { .chat-room-prefs .btn { flex:1; } .chat-heading h1 { font-size:1.25rem; } .chat-log { height:35dvh; min-height:180px; } }

.concept-std .shell-header--game .chat-top-button { order:4; min-height:44px; }
.chat-heading h1:focus { outline:none; }
.chat-top-button { box-sizing:border-box; }

.chat-heading { padding:0; background:none; min-height:0; }
.chat-room-prefs .btn { white-space:normal; height:auto; padding:.5rem; line-height:1.3; }
.concept-mint > .shell-header--game .chat-top-button { order:7; padding:0 4px; font-size:11px; max-width:64px; }
@media (max-width:600px) { .concept-mint > .shell-header--game:has(.chat-top-button:not([hidden])) .brand { display:none; } }
.chat-content > .btn { margin:.25rem .4rem .25rem 0; }

.chat-unread { flex-shrink:0; min-width:1.4rem; text-align:center; box-sizing:border-box; }

.chat-screen--conversation { height:100%; display:flex; flex-direction:column; min-height:0; width:100%; box-sizing:border-box; }
.chat-screen--conversation > .chat-heading, .chat-screen--conversation > .chat-notice, .chat-screen--conversation > .chat-call-sign-row { flex-shrink:0; }
.chat-call-sign-row { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; margin:.2rem 0 .5rem; font-size:.85rem; color:var(--muted,#b2c0d4); }
.chat-call-sign-row strong { color:var(--text,#e5ebf4); overflow-wrap:anywhere; }
.chat-call-sign-form input { width:100%; box-sizing:border-box; }
.chat-content--conversation { display:flex; flex-direction:column; flex:1; min-height:0; }
.chat-content--conversation .chat-log { height:auto; flex:1 1 auto; min-height:90px; }
.chat-content--conversation > :not(.chat-log) { flex-shrink:0; }
@media (max-width:480px) {
  .chat-screen--conversation .chat-heading { margin-bottom:.25rem; }
  .chat-content--conversation > .chat-retention { margin:.25rem 0; }
  .chat-content--conversation > .chat-toolbar { margin:.25rem 0; }
  .chat-content--conversation > .chat-composer { padding:.25rem 0; }
}

/* Custom-room dialogs use the same compact rows and visible kit buttons. */
.chat-custom { min-width:0; }
.modal:has(.chat-custom) { width:min(42rem,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:0; }
.modal:has(.chat-custom) .modal-body { overflow-y:auto; min-height:0; }
.chat-custom input:not([type=range]), .chat-custom textarea, .chat-custom select,
.chat-identity input:not([type=range]):not([type=file]) { display:block; width:100%; min-width:0; box-sizing:border-box; min-height:44px; padding:.5rem; color:inherit; background:var(--surface,#132136); border:1px solid var(--border,#42536c); border-radius:6px; font:inherit; }
.chat-custom label { display:block; margin:.5rem 0 .25rem; }
.chat-custom .st-btn, .chat-identity .st-btn { min-height:44px; height:auto; box-sizing:border-box; margin:0; padding:6px 8px; white-space:normal; border:1px solid var(--border,#42536c); }
.chat-custom .chat-toolbar { gap:.35rem; }
.chat-custom p, .chat-custom small { font-size:.8rem; overflow-wrap:anywhere; }
.chat-custom h3 { margin:.5rem 0; }
.chat-directory-row, .chat-invite-row, .chat-member { border-bottom:1px solid var(--border,#42536c); padding:.4rem 0; }
.chat-directory-row { display:flex; align-items:center; gap:.5rem; }
.chat-directory-row > div { min-width:0; flex:1; overflow-wrap:anywhere; }
.chat-directory-row .st-btn { flex-shrink:0; }
.chat-member__identity { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.chat-member__identity a { min-width:0; overflow-wrap:anywhere; padding:.35rem 0; min-height:44px; box-sizing:border-box; display:flex; align-items:center; }
.chat-role { border:1px solid var(--border,#42536c); color:var(--accent,#65d8e1); font-size:.7rem; border-radius:4px; padding:.15rem .35rem; }
.chat-ownership { border-left:3px solid var(--accent,#65d8e1); padding:.3rem .6rem; margin:.6rem 0; }
.chat-invite-help, .chat-slow { border-top:1px solid var(--border,#42536c); margin-top:.6rem; padding-top:.3rem; }
.chat-slow > .st-btn { margin-top:.5rem; }
.chat-identity { max-width:38rem; }
.chat-identity [hidden] { display:none !important; }
.chat-identity small { display:block; font-size:.75rem; margin:.35rem 0; }
.chat-identity h3 { margin:.6rem 0; }
.chat-picture-editor { padding:.6rem 0; border-top:1px solid var(--border,#42536c); margin-top:1rem; }
.chat-picture-preview img { border-radius:8px; object-fit:cover; }
.chat-picture-preview .chat-avatar { display:inline-flex; width:64px; height:64px; align-items:center; justify-content:center; font-size:2rem; background:var(--surface,#132136); border-radius:8px; }
.chat-picture-editor input[type=file] { width:100%; min-height:44px; box-sizing:border-box; font-size:.8rem; }
.chat-picture-editor input[type=file]::file-selector-button { min-height:44px; }
.chat-picture-crop canvas { width:128px; height:128px; display:block; margin:.5rem 0; border-radius:8px; }
.chat-picture-crop input { width:100%; min-height:44px; }
.chat-call-sign-form { margin-bottom:1rem; }
#app.concept-std main.game-main .chat-settings .st-btn { box-sizing:border-box; height:auto; min-height:44px; margin:0; padding:6px 8px; border:1px solid var(--st-line); background-clip:border-box; }
.chat-settings .st-btn { min-height:44px; }
.modal:has(.chat-custom) .modal-foot .st-btn, .modal:has(.chat-custom) .modal-head button { min-height:44px; min-width:44px; }
.chat-member .chat-toolbar:empty { display:none; }
.chat-identity .st-btn:disabled { opacity:.45; cursor:default; }

.chat-dialog.chat-custom > .st-btn { margin-top:.5rem; }
.chat-custom [hidden] { display:none !important; }
.chat-custom .st-btn:disabled { opacity:.45; cursor:default; }

/* Typing on a phone. The box grows with the message to its eight lines, then scrolls inside itself. */
@media (pointer: coarse) {
  .chat-composer__entry textarea { field-sizing: content; min-height: calc(2lh + 1.2rem + 2px); max-height: calc(8lh + 1.2rem + 2px); overflow-y: auto; }
}
/* The keyboard is up and the composer has it (ui/keyboardInset.js): the conversation takes what is left of the glass,
   the newest messages over the composer over the keyboard. The room's other controls are one blur away. */
html.kb-open:has(#chat-compose:focus) #app > .sub-tabbar,
html.kb-open:has(#chat-compose:focus) #app .combat-strip,
html.kb-open:has(#chat-compose:focus) #app .shard-shutdown-strip { display: none; }
html.kb-open main.game-main:has(#chat-compose:focus) { display: flex; flex-direction: column; overflow: hidden; padding-block: 4px 0; }
html.kb-open .chat-screen:has(#chat-compose:focus) { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
html.kb-open .chat-screen:has(#chat-compose:focus) > :not(.chat-content, .chat-notice) { display: none; }
html.kb-open .chat-screen:has(#chat-compose:focus) > .chat-notice { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
html.kb-open .chat-screen:has(#chat-compose:focus) .chat-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html.kb-open .chat-screen:has(#chat-compose:focus) .chat-content > :not(.chat-log, .chat-composer, .btn) { display: none; }
html.kb-open .chat-screen:has(#chat-compose:focus) .chat-content > .chat-older { display: none; }
html.kb-open .chat-screen:has(#chat-compose:focus) .chat-log { flex: 1 1 auto; height: auto; min-height: 0; }
html.kb-open .chat-screen:has(#chat-compose:focus) .chat-composer { flex: 0 0 auto; padding-block: .25rem; }