/* assets/cases.compose.align.css
 * Enterprise reply footer alignment:
 * - Attach files block stretches to fill available width
 * - Send Reply stays docked on the right
 * - Mobile stacks cleanly
 *
 * PLUS (uploaded files overview stability):
 * - Overview panel stays a fixed height
 * - If more files exist, the list scrolls instead of growing the page
 *
 * Scoped where possible to avoid impacting other pages.
 */

/* =========================
 * Reply composer alignment
 * ========================= */

.replybox > .row.two{
  display:flex !important;
  gap:12px !important;
  align-items:flex-start !important;
  width:100% !important;
}

.replybox > .row.two > .col:first-child{
  flex:1 1 auto !important;
  min-width:0 !important;
}

.replybox > .row.two > .col:last-child{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
}

/* Ensure dropzone actually fills the left column */
.replybox #replyDrop{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* Keep button tidy and right-aligned */
.replybox #btnSendReply{
  white-space:nowrap !important;
}

/* Mobile: stack Attach + Send */
@media (max-width: 720px){
  .replybox > .row.two{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .replybox > .row.two > .col:last-child{
    width:100% !important;
  }
  .replybox #btnSendReply{
    width:100% !important;
  }
}

/* ==========================================
 * Uploaded files overview: fixed height scroll
 * ==========================================
 *
 * Expected HTML pattern:
 *   <div class="files-overview-scroll">
 *     <table>...</table>
 *   </div>
 *
 * If your table wrapper uses a different class/id today,
 * either add this class to the wrapper or adjust selector.
 */

.files-overview-scroll{
  height:420px;
  max-height:420px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}

/* Keep header visible while scrolling (nice enterprise polish) */
.files-overview-scroll thead th{
  position:sticky;
  top:0;
  background:var(--card, #fff);
  z-index:2;
}

/* Slightly tighter on smaller screens */
@media (max-width: 900px){
  .files-overview-scroll{
    height:260px;
    max-height:260px;
  }
}


/* =========================
 * Rich text thread styling (Quill-like)
 * =========================
 * Goal: make the rendered conversation look as close as possible to what Quill shows
 * (spacing, list markers, and Quill indent classes).
 */

/* Readonly Quill container (used for Description + message bodies).
 * Keeps Quill formatting (nested lists, indentation, embeds) without adding extra padding/borders.
 */
.codreum-ql-readonly{
  border:0 !important;
  background:transparent !important;
}
.codreum-ql-readonly .ql-editor{
  padding:0 !important;
  margin:0 !important;
  font-size:inherit !important;
  font-family:inherit !important;
}

/* Message body formatting now relies on Quill's own CSS because rich HTML is wrapped
   in a readonly .ql-editor container (codreum-ql-readonly). Avoid overriding list/indent
   rules here to prevent double-indentation. */

/* =========================
 * Inline images in thread
 * =========================
 * Keep images compact in the conversation, but let users click to zoom.
 * (No layout change; this is purely a visual cap.)
 */

.msg .msg-body img[data-key],
.msg .msg-body img[data-kind="inline"]{
  max-width:100% !important;
  max-height:260px !important;
  width:auto !important;
  height:auto !important;
  display:block;
  margin-top:8px;
  border-radius:10px;
  cursor:zoom-in;
}

/* When images are inserted inside list items, reduce top margin for tighter alignment */
.msg .msg-body li img[data-key],
.msg .msg-body li img[data-kind="inline"]{
  margin-top:6px !important;
}

/* Simple lightbox for image zoom */
.cd-img-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.72);
  z-index:9999;
  padding:18px;
}

/* Open state (strict CSP: no inline style.display) */
.cd-img-lightbox.is-open{
  display:flex;
}


.cd-img-lightbox-inner{
  position:relative;
  /* IMPORTANT: ensure the lightbox has a real viewport-sized box so images can
     scale up. Without an explicit width, the container shrinks to the image's
     natural size, making "zoom" appear unchanged. */
  width: min(1100px, 96vw);
  max-width: min(1100px, 96vw);
  max-height: 92vh;
}

.cd-img-lightbox-img{
  max-width:100%;
  max-height:92vh;
  /* Match Support Admin behavior: scale image up to the available viewport */
  width:100%;
  height:auto;
  object-fit: contain;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
}

.cd-img-lightbox-close{
  position:absolute;
  top:-10px;
  right:-10px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:22px;
  line-height:38px;
  cursor:pointer;
}

.cd-img-lightbox-close:hover{ filter:brightness(1.05); }


/* ---------------------------------------------
 * Enterprise: sticky summary, system message styling
 * (light-touch, scoped to Cases page)
 * --------------------------------------------- */


/* Sticky case summary panel (desktop only) */
@media (min-width: 980px){
  #caseDetailCard .split > .thread[aria-label="Case summary"]{
    position: sticky;
    top: calc(var(--topbar-h, 60px) + 14px);
    align-self: flex-start;
    max-height: calc(100vh - var(--topbar-h, 60px) - 28px);
    overflow:auto;
  }
}

/* Reply checklist (right panel) */
#replyChecklistPanel{
  margin-top:12px;
}

#replyChecklistPanel .reply-checklist-list{
  margin:10px 0 0;
  padding-left:18px;
}

#replyChecklistPanel .reply-checklist-list li{
  margin:6px 0;
}

/* System events in thread */
.msg.msg-system{
  background:rgba(15,23,42,0.03);
  border:1px dashed rgba(148,163,184,0.7);
  border-left:4px solid rgba(148,163,184,0.9);
}

.msg.msg-system .msg-from{
  color:var(--muted, #5b6472);
}

.msg.msg-system .msg-from::before{
  content:"ℹ ";
  font-weight:600;
  color:var(--muted, #5b6472);
}

.msg.msg-system .msg-body{
  color:var(--ink, #0e1116);
}


/* ===============================
   Enterprise UX polish (vNext)
   - Thread date separators
   - Jump-to-latest button
   - Composer staged hint
   - Case Summary trust cues
   =============================== */

.msg-daysep{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
  color:#64748b;
  font-size:12px;
  user-select:none;
}
.msg-daysep:before,
.msg-daysep:after{
  content:"";
  flex:1;
  height:1px;
  background:#e7ecf3;
}
.msg-daysep > span{
  padding:2px 10px;
  border:1px solid #e7ecf3;
  border-radius:999px;
  background:#fff;
  white-space:nowrap;
}

.jump-latest-btn{
  position:fixed;
  right:18px;
  bottom:110px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #dbe5f0;
  background:#fff;
  color:#0e1116;
  box-shadow:0 12px 26px rgba(2,6,23,.14);
  cursor:pointer;
}
.jump-latest-btn span:first-child{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#f1f5f9;
  font-weight:700;
}
.jump-latest-btn:hover{
  border-color:#c9d7ea;
  box-shadow:0 14px 30px rgba(2,6,23,.16);
}

.reply-send-hint{
  margin:0 0 8px;
  font-size:12px;
  color:#64748b;
}

.trust-cues{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #e7ecf3;
  border-radius:12px;
  background:#fbfcfe;
}
.trust-cues .trust-line{
  display:flex;
  gap:8px;
  line-height:1.35;
  font-size:12px;
  color:#475569;
}
.trust-cues .trust-k{
  min-width:98px;
  color:#0f172a;
  font-weight:600;
}


/* =========================
 * Enterprise polish: composer meta row + staged hint
 * ========================= */

.compose-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
}
.compose-meta-row .hint{
  margin:0;
}
.compose-meta-row .reply-send-hint{
  margin:0;
  text-align:right;
  white-space:nowrap;
}
@media (max-width: 920px){
  .compose-meta-row{ flex-wrap:wrap; }
  .compose-meta-row .reply-send-hint{
    width:100%;
    text-align:left;
    white-space:normal;
  }
}

/* Keep the Send Reply column compact (avoid affecting upload panel width) */
#btnSendReply{ white-space:nowrap; }

/* =========================
 * Enterprise polish: summary key fields (ellipsis + copy)
 * ========================= */

.cd-kv{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}
.cd-ellip{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cd-iconbtn{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #e7ecf3;
  background:#fff;
  color:#334155;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.cd-iconbtn:hover{ background:#fbfcfe; border-color:#d6e2f2; }
.cd-iconbtn:active{ transform:translateY(1px); }
.cd-iconbtn svg{ display:block; }

/* Truncate long license keys in the list view */
.note.tight .mono{
  display:inline-block;
  max-width: min(52vw, 560px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom;
}

/* =========================
 * Enterprise polish: choice/prompt modal sizing
 * ========================= */

/*
  Modal centering + sizing fixes (1+2):
  - New Case modal stays centered on wide screens (no left bias)
  - Upload staged files modal becomes compact (enterprise look)
  - Keep scrolling safe on short viewports
*/
.page-cases .cr-modal{
  place-items:center;
  padding:24px 16px;
  overflow:auto;
}
.page-cases .cr-modal .cr-sheet{
  max-height: calc(100vh - 48px);
}

#newCaseModal .cr-sheet{
  width: min(1040px, calc(100vw - 44px));
  max-width:1040px;
}

#crChoiceModal .cr-sheet{
  width: min(760px, calc(100vw - 44px));
  max-width:760px;
}

#crPromptModal .cr-sheet{
  width: min(860px, calc(100vw - 44px));
  max-width:860px;
}

#codreumLogoutModal .cr-sheet{
  width: min(520px, calc(100vw - 44px));
  max-width:520px;
}


@media (max-height: 720px){
  .page-cases .cr-modal{ padding:16px 12px; }
  .page-cases .cr-modal .cr-sheet{ max-height: calc(100vh - 32px); }
}

/* =========================
 * Enterprise polish: inline image framing
 * ========================= */

.msg .msg-body img[data-key],
.msg .msg-body img[data-kind="inline"]{
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.55);
}

/* =========================
 * Cases toolbar micro-fix (Enterprise)
 * Ensure "Clear filters" is ALWAYS visible (no clipping) with 4 filter selects.
 * This section intentionally overrides older nowrap flex rules.
 * ========================= */

.cases-toolbar .tb-group.filters{
  overflow:visible;
}

.cases-toolbar .tb-group.filters .tb-row{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap:8px;
  align-items:center;
  min-width:0;
}

.cases-toolbar .tb-group.filters .tb-row > select.input{
  width:100%;
  min-width:0;
  max-width:100%;
}

.cases-toolbar .tb-group.filters .tb-row > .tb-clear{
  justify-self:end;
  white-space:nowrap;
}

@media (max-width: 1240px){
  .cases-toolbar .tb-group.filters .tb-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cases-toolbar .tb-group.filters .tb-row > .tb-clear{
    grid-column: 1 / -1;
    justify-self:end;
  }
}

@media (max-width: 980px){
  .cases-toolbar .tb-group.filters .tb-row{
    grid-template-columns: 1fr;
  }
  .cases-toolbar .tb-group.filters .tb-row > .tb-clear{
    grid-column:auto;
    justify-self:end;
  }
}

/* =========================
 * Quill toolbar: keep Monospace + Tx on the SAME row
 * =========================
 * On some laptop widths, the toolbar wraps so the right-side controls
 * (Monospace + Tx / clear formatting) drop to a second line.
 * Enterprise UX expectation: keep a single toolbar row; if space is tight,
 * allow horizontal scroll instead of wrapping.
 */

.page-cases .case-quill-wrap .ql-toolbar.ql-snow{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
}

/* Prevent Quill "formats" groups from shrinking weirdly; keep them as
   atomic chunks so scrolling is smooth. */
.page-cases .case-quill-wrap .ql-toolbar.ql-snow .ql-formats{
  flex:0 0 auto !important;
  white-space:nowrap;
}

/* Make the scroll bar subtle (shows only when needed) */
.page-cases .case-quill-wrap .ql-toolbar.ql-snow::-webkit-scrollbar{
  height:6px;
}
.page-cases .case-quill-wrap .ql-toolbar.ql-snow::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.55);
  border-radius:999px;
}
.page-cases .case-quill-wrap .ql-toolbar.ql-snow::-webkit-scrollbar-track{
  background:transparent;
}

/* =========================
 * Enterprise focus + table polish (A11y)
 * ========================= */

/* Clear keyboard focus rings (only when keyboard navigating) */
:where(#casesToolbar, #casesListCard, #caseDetailCard, #newCaseModal, .case-quill-wrap) a:focus-visible,
:where(#casesToolbar, #casesListCard, #caseDetailCard, #newCaseModal, .case-quill-wrap) button:focus-visible,
:where(#casesToolbar, #casesListCard, #caseDetailCard, #newCaseModal, .case-quill-wrap) input:focus-visible,
:where(#casesToolbar, #casesListCard, #caseDetailCard, #newCaseModal, .case-quill-wrap) select:focus-visible,
:where(#casesToolbar, #casesListCard, #caseDetailCard, #newCaseModal, .case-quill-wrap) textarea:focus-visible,
:where(#casesToolbar, #casesListCard, #caseDetailCard, #newCaseModal, .case-quill-wrap) [tabindex]:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
  border-radius:10px;
}

/* Quill toolbar buttons sometimes suppress focus styles; enforce */
.case-quill-wrap .ql-toolbar button:focus-visible,
.case-quill-wrap .ql-toolbar .btn.small:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

/* Table row hover + selected row cue (enterprise feel) */
#casesListCard .tbl tbody tr:hover{ background: rgba(2,6,23,.03); }
#casesListCard .tbl tbody tr.row-selected{ background: rgba(37,99,235,.06); }
#casesListCard .tbl tbody tr.row-selected:hover{ background: rgba(37,99,235,.08); }

/* Slight cue for sorted header */
#casesListCard .tbl thead th.is-sorted{ background: rgba(2,6,23,.02); }

/* Quieter pager/meta text (enterprise feel)
 * - Showing X of Y
 * - Page A / B
 * - Sorted by ...
 */
#casesListCard .cases-count,
#casesListCard .cases-pageinfo,
#casesListCard .cases-sorthint{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}

#casesListCard .cases-sorthint{ margin-top: 2px; }