/* 'Google Sans' isn't a font Google distributes for self-hosting, so the
   original @font-face pointing at fonts/googleSans.ttf could never actually
   resolve -- it was silently falling back to the Arial default the whole
   time. Swapped in Poppins instead: a free, properly-licensed Google Fonts
   family with a similar geometric feel, loaded straight from Google's CDN
   so there's nothing to download or host yourself. If you'd rather use a
   different family, just change the font name in this @import line and in
   the two font-family rules below that reference 'MyCustomFont'. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #1e1e1e;
    color: white;
}

/* Center everything */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Title */
h1 {
    font-size: 48px;
    margin-bottom: 40px;
    font-weight: 500;
    font-family: 'Poppins', Arial, sans-serif;
}

h2{
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
}

/* Name Dropdown */
select {
    padding: 15px 50px 15px 25px;
    font-size: 20px;
    border-radius: 18px;
    border: 1px solid #3a3a3a;
    background-color: #252525;
    color: white;
    width: 290px;
    height: 60px;

    appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 20 20' width='20' xmlns='https://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px;

    transition: all 0.25s ease;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 12px rgba(0,0,0,0.25);
}

/* Hovering over name dropdown */
select:hover {
    background-color: #2d2d2d;
    border-color: #4a4a4a;
}


select:focus {
    outline: none;
    border-color: #ff8c32;
    box-shadow:
        0 0 0 4px rgba(255,140,50,0.15),
        0 6px 20px rgba(0,0,0,0.35);
}


/* Button */
button {
    padding: 15px 25px;
    font-size: 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background-color: #ff8c32;
    color: white;
}

/* Disabled button */
button:disabled {
    background-color: #333333;
    cursor: not-allowed;
}

.top-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 20px;
}

.button-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 600px; /* controls alignment with top row */
}

.button-rowpg1 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 630px;
    margin-top: 130px;
}
input {
    padding: 15px 20px;
    font-size: 24px;
    border-radius: 25px;
    border: 1px solid #3a3a3a;
    background-color: #2c2c2c;
    color: white;
    width: 220px;
    height: 35px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

input:focus {
    outline: none;
    border-color: #ff8c32;
}

.back-btn {
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: #ff8c32;
    color: white;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 16px;
}

.buttonpg1 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 700px; /* controls alignment with top row */
}

.access-existing {
    margin-bottom: 10px;
    border-radius: 100px;
    background-color: #383838;
    font-weight: 600;
    font-size: 16px;
    width: 220px;
    height: 60px;
}

.or {
    margin-bottom: 30px;
    font-weight: 600;
    color: #c4c4c4;
}

.create-new {
    margin-bottom: 10px;
    border-radius: 100px;
    background-color: #ff8c32;
    font-size: 16px;
    width: 220px;
    height: 60px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.enterfilename {
    width: 500px;
    height: 30px;
    font-size: 20px;
    text-align: left;
    padding-left: 20px;
    font-family: 'Poppins', Arial, sans-serif;
}


.file-upload {
    display: inline-block;
    background-color: #ff8c32;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    margin-top: 10px;
}

.file-upload input {
    display: none;
}

.importhalocomments{
    margin-top: 50px;
}

.button-row2 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 600px;
    margin-top: 34px;
}

.code-box-row {
    display: flex;
    gap: 28px;
    margin-top: 30px;
    margin-bottom: 55px;
}

.code-box {
    width: 85px;
    height: 85px;
    padding: 0;
    margin: 0;

    background-color: #2c2c2c;
    color: white;

    border: 1px solid rgba(255, 255, 255, 0.151);
    border-radius: 16px;

    font-size: 34px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 4px 12px rgba(0,0,0,0.25);

    transition: all 0.22s ease;
}

.code-box:focus {
    outline: none;
    border-color: #ff8c32;
    box-shadow:
        0 0 0 4px rgba(255,140,50,0.15),
        0 6px 20px rgba(0,0,0,0.35);
}

.filename {
    margin: 5px;
}

.logo {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
}

.logo {
    margin-top: 20px;
    height: 55px;
    justify-content: left;
}

/* ===================== Shared additions ===================== */

.error-text {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 10px;
    max-width: 400px;
    text-align: center;
}

.empty-state {
    color: #888;
    font-size: 15px;
}

/* ===================== Explorer (page3b) ===================== */

.explorer-container {
    justify-content: flex-start;
    padding-top: 110px;
    height: auto;
    min-height: 100vh;
    box-sizing: border-box;
}

.explorer-title {
    font-size: 32px;
    margin-bottom: 30px;
}

.explorer-panel {
    width: 100%;
    max-width: 800px;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

.folder-tile {
    background-color: #252525;
    border: 1px solid #3a3a3a;
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
}

.folder-tile:hover {
    background-color: #2d2d2d;
    border-color: #ff8c32;
}

.folder-icon {
    font-size: 34px;
    margin-bottom: 10px;
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.doc-row {
    background-color: #252525;
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
}

.doc-row:hover {
    border-color: #ff8c32;
}

.doc-row-locked {
    cursor: default;
    opacity: 0.75;
}

.doc-row-locked:hover {
    border-color: #3a3a3a;
}

.doc-main {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.doc-icon {
    font-size: 22px;
}

.doc-name {
    font-size: 16px;
    font-weight: 600;
}

.doc-meta {
    font-size: 13px;
    color: #999;
    margin-top: 3px;
}

.request-access-btn {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 20px;
    background-color: #3a3a3a;
}

.request-access-btn:disabled {
    background-color: #2a2a2a;
    color: #888;
}

/* ===================== PDF Viewer (page4) ===================== */

.viewer-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.viewer-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid #3a3a3a;
    background-color: #1a1a1a;
}

.viewer-topbar .back-btn {
    justify-self: start;
}

.viewer-topbar .viewer-doc-title {
    justify-self: center;
    text-align: center;
}

.viewer-topbar .viewer-actions {
    justify-self: end;
}

.viewer-doc-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 20px;
}

.viewer-actions {
    display: flex;
    gap: 10px;
}

.export-btn {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 20px;
    background-color: #383838;
}

.export-btn.primary {
    background-color: #ff8c32;
}

.export-btn.danger {
    background-color: #5a2626;
    color: #ff9a9a;
}

.export-btn.danger:hover {
    background-color: #7a3030;
}

/* ===================== Combined top bar menu (Export All / Export Client
   Only / Delete), replacing three separate buttons ===================== */

.topbar-menu {
    position: relative;
}

/* Fixed: the ⌄ glyph's own font metrics sit low relative to the "More"
   label next to it, which read as visually "off" even though the layout
   around it was fine. inline-flex + line-height:1 removes the descender
   space the glyph was reserving, and a small translateY nudges it up to
   optically center against the button text. The same offset is preserved
   in the .open (rotated) state below so it doesn't jump position when it
   flips. */
.topbar-menu-chevron {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    margin-left: 6px;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform 0.18s ease;
}

.topbar-menu.open .topbar-menu-chevron {
    transform: translateY(-1px) rotate(180deg);
}

.topbar-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background-color: #232323;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    padding: 6px;
    z-index: 30;
}

.topbar-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    color: #ddd;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.topbar-menu-item:hover {
    background-color: #2d2d2d;
}

.topbar-menu-item.danger {
    color: #ff9a9a;
}

.topbar-menu-item.danger:hover {
    background-color: rgba(122, 48, 48, 0.25);
}

.topbar-menu-divider {
    height: 1px;
    background-color: #3a3a3a;
    margin: 6px 4px;
}

.viewer-columns {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* -------- left: condensed comment list -------- */

.comment-panel-left {
    width: 300px;
    border-right: 1px solid #3a3a3a;
    display: flex;
    flex-direction: column;
    background-color: #1a1a1a;
}

.comment-filter-row {
    display: flex;
    gap: 6px;
    padding: 12px;
    border-bottom: 1px solid #3a3a3a;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 14px;
    background-color: #2c2c2c;
    color: #ccc;
}

.filter-btn.active {
    background-color: #ff8c32;
    color: white;
}

.comment-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.comment-item {
    background-color: #232323;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
}

.comment-item:hover {
    border-color: #555;
}

.comment-item.selected {
    border-color: #ff8c32;
}

.comment-item-header {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 11px;
    margin-bottom: 4px;
}

.comment-item-snippet {
    color: #f0f0f0;
    font-size: 13.5px;
    line-height: 1.45;
    margin: 3px 0 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    margin-top: 6px;
    margin-right: 4px;
}

.badge-client {
    background-color: rgba(216, 140, 26, 0.25);
    color: #ff8c32;
}

.badge-assigned {
    background-color: rgba(76, 110, 245, 0.2);
    color: #7c9bff;
}

/* Distinct from .badge-assigned (individual people) -- a violet tone marks
   this as a whole-department assignment (e.g. "Design Team") rather than a
   specific person, echoing the .av-violet avatar color used elsewhere. */
.badge-group {
    background-color: rgba(160, 110, 255, 0.22);
    color: #c3a3ff;
    font-weight: 700;
}

.badge-resolved {
    background-color: rgba(80, 200, 120, 0.2);
    color: #64d68a;
}

/* Marks a comment as excluded from export -- same visual language
   (rounded, muted) as the other status badges, but in the same red-ish
   tone used for destructive/negative actions elsewhere (.small-btn.danger,
   .icon-btn.deny) so "won't be exported" reads unambiguously. */
.badge-suppressed {
    background-color: rgba(122, 48, 48, 0.28);
    color: #ff9a9a;
    font-weight: 700;
}

/* -------- center: pdf pages -------- */

.pdf-column {
    flex: 1;
    overflow-y: auto;
    background-color: #2a2a2a;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-wrapper {
    position: relative;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    background: white;
}

.textLayer {
    position: absolute;
    text-align: initial;
    inset: 0;
    overflow: hidden;
    line-height: 1;
    opacity: 1;
    transform-origin: 0 0;
    --scale-factor: 1;
}

.textLayer span, .textLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

.textLayer ::selection {
    background: rgba(255, 140, 50, 0.4);
}

.highlight-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.highlight-mark {
    position: absolute;
    background-color: rgba(255, 220, 60, 0.4);
    border-radius: 2px;
    pointer-events: auto;
    cursor: pointer;
}

.highlight-mark.for-client {
    background-color: rgba(255, 140, 50, 0.35);
}

.highlight-mark.highlighted-selected {
    background-color: rgba(255, 140, 50, 0.65);
}

/* -------- right: thread / new comment -------- */

.comment-panel-right {
    width: 320px;
    border-left: 1px solid #3a3a3a;
    background-color: #1a1a1a;
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}

.panel-placeholder {
    color: #777;
    margin-top: 40px;
    text-align: center;
}

.thread-comment {
    position: relative;
    background-color: #232323;
    border-radius: 10px;
    padding: 14px 14px 12px;
    border-left: 3px solid #ff8c32;
}

.thread-comment.internal {
    border-left-color: #7c9bff;
}

/* Resolved always wins over the client/internal color, so a finished
   comment reads as "done" at a glance instead of blending in. */
.thread-comment.is-resolved {
    border-left-color: #64d68a;
}

/* Suppressed wins over both resolved and client/internal -- a comment
   that's excluded from export should always read as "not going out" at a
   glance, regardless of its other statuses. Darker card background (not
   just a border tweak) so it visually recedes from comments that will
   actually be exported, without being so dark it's hard to read. */
.thread-comment.is-suppressed {
    background-color: #1c1a1a;
    border-left-color: #4a4444;
}

.thread-comment.is-suppressed .thread-comment-body {
    background-color: #181616;
    border-color: #2a2626;
}

.thread-comment-header {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 6px;
    margin-bottom: 8px;
    /* leaves room so the header text/badges never run under the
       suppress-toggle button pinned to the card's top-right corner */
    padding-right: 34px;
}

.thread-comment-header .badge {
    margin: 0;
}

/* The actual comment text is the reason the card exists -- box it off from
   the metadata/quote/controls around it so it's unmistakable at a glance. */
.thread-comment-body {
    font-size: 14.5px;
    line-height: 1.55;
    color: #f5f5f5;
    background-color: #1c1c1c;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 6px 0 14px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.thread-quote {
    font-style: italic;
    color: #888;
    font-size: 12px;
    margin-bottom: 8px;
    border-left: 2px solid #444;
    padding-left: 8px;
}

.thread-controls {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.panel-select, .panel-textarea {
    width: 100%;
    box-sizing: border-box;
    background-color: #2c2c2c;
    color: white;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    margin: 0;
    height: auto;
}

.panel-textarea {
    min-height: 80px;
    resize: vertical;
}

.panel-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #ccc;
}

.small-btn {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 16px;
}

.small-btn.secondary {
    background-color: #3a3a3a;
}

.small-btn.danger {
    background-color: #7a3030;
}

/* ===================== Suppress-from-export toggle (page4 thread card) =====================
   A small circular icon-button pinned to the top-right corner of a comment
   card, sitting above/apart from the reply and toggle-chip controls below
   it. Toggles between an "eye" (included in export) and "eye-off"
   (excluded) glyph -- see eyeIcon() in page4.html. */

.suppress-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.06);
    border: 1px solid #3a3a3a;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}

.suppress-toggle-btn:hover {
    border-color: #666;
    color: #ccc;
    background-color: rgba(255,255,255,0.1);
}

.suppress-toggle-btn.active {
    background-color: rgba(122, 48, 48, 0.25);
    border-color: #7a3030;
    color: #ff9a9a;
}

.suppress-toggle-btn.active:hover {
    background-color: rgba(122, 48, 48, 0.35);
    border-color: #944040;
}

.suppress-toggle-btn svg {
    width: 15px;
    height: 15px;
}

/* ===================== Toggle chips (client / resolved) ===================== */

.chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.toggle-chip {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 16px;
    background-color: #2c2c2c;
    color: #999;
    border: 1px solid #3a3a3a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.18s ease;
}

.toggle-chip:hover {
    border-color: #555;
}

.toggle-chip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #666;
    transition: background-color 0.18s ease;
}

.toggle-chip.client.active {
    background-color: rgba(255, 140, 50, 0.18);
    border-color: #ff8c32;
    color: #ff8c32;
}
.toggle-chip.client.active .dot { background-color: #ff8c32; }

.toggle-chip.resolved.active {
    background-color: rgba(100, 214, 138, 0.15);
    border-color: #64d68a;
    color: #64d68a;
}
.toggle-chip.resolved.active .dot { background-color: #64d68a; }

/* ===================== Manage access modal ===================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-box {
    background-color: #1e1e1e;
    border: 1px solid #3a3a3a;
    border-radius: 16px;
    padding: 24px;
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 20px;
    margin-bottom: 6px;
}

.modal-section-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin: 18px 0 8px;
}

.access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #252525;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 13px;
}

.access-row-name {
    display: flex;
    flex-direction: column;
}

.access-row-sub {
    font-size: 11px;
    color: #888;
}

.access-row-actions {
    display: flex;
    gap: 6px;
}

.icon-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 14px;
    background-color: #3a3a3a;
}

.icon-btn.approve {
    background-color: #2f6b45;
}

.icon-btn.deny, .icon-btn.revoke {
    background-color: #7a3030;
}

.modal-close-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.grant-form-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.grant-form-row select {
    flex: 1;
    width: auto;
    height: auto;
    padding: 10px 14px;
    font-size: 14px;
}

.grant-form-row button {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 14px;
}

/* ===================== Folder picker / creation ===================== */

.folder-field-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.folder-field-row select {
    width: 320px;
    height: auto;
    padding: 15px 30px 15px 20px;
}

.new-folder-inline {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.new-folder-inline input {
    width: 220px;
    height: auto;
    margin: 0;
    padding: 12px 18px;
    font-size: 15px;
}

.new-folder-inline button {
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 20px;
}

.new-folder-tile {
    background-color: transparent;
    border: 1px dashed #555;
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
    color: #aaa;
    transition: all 0.2s ease;
}

.new-folder-tile:hover {
    border-color: #ff8c32;
    color: #ff8c32;
}

/* ===================== Doc row extras (delete) ===================== */

.doc-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delete-icon-btn {
    background: transparent;
    color: #a05050;
    padding: 6px 10px;
    font-size: 16px;
    border-radius: 10px;
}

.delete-icon-btn:hover {
    background-color: rgba(200, 80, 80, 0.15);
    color: #ff8080;
}

/* ===================== Comment filter card (page4 upper-left) =====================
   .comment-filter-card / .filter-label / .segmented-control are used in the
   markup but had no rules of their own, so they were falling back to
   unstyled block/text defaults. Everything below is additive -- nothing
   above this section was changed, so anything that only relies on
   .filter-btn / .comment-filter-row keeps its original look. */

.comment-filter-card {
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    border-bottom: 1px solid #3a3a3a;
    background-color: #1a1a1a;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #777;
    margin: 14px 0 7px;
}

.filter-label:first-child {
    margin-top: 0;
}

.segmented-control {
    display: flex;
    align-items: stretch;
    gap: 3px;
    background-color: #232323;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 3px;
}

/* Scoped to .segmented-control so the original .filter-btn /
   .comment-filter-row pairing (if used anywhere else) keeps its old look. */
.segmented-control .filter-btn {
    flex: 1;
    margin: 0;
    padding: 7px 8px;
    border-radius: 9px;
    background-color: transparent;
    color: #999;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented-control .filter-btn:hover:not(.active) {
    background-color: #2d2d2d;
    color: #ddd;
}

.segmented-control .filter-btn.active {
    background-color: #ff8c32;
    color: white;
}

/* ===================== Right panel polish (page4) ===================== */

.field-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #777;
    margin: 12px 0 6px;
}

/* ===================== Assign-to control (custom multi-select) =====================
   Replaces the old native <select multiple>, which forced users to scroll a
   cramped listbox and gave no clear picture of who was already assigned.
   This is a trigger (showing removable name chips) that opens a checkbox
   dropdown grouped by department / person. */

.assign-control {
    position: relative;
}

.assign-trigger {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    background-color: #2c2c2c;
    color: white;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.assign-trigger:hover {
    border-color: #4a4a4a;
}

.assign-control.open .assign-trigger {
    border-color: #ff8c32;
    box-shadow: 0 0 0 3px rgba(255, 140, 50, 0.15);
}

.assign-trigger-placeholder {
    color: #888;
}

.assign-trigger-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.assign-trigger-chevron {
    color: #888;
    font-size: 11px;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.assign-control.open .assign-trigger-chevron {
    transform: rotate(180deg);
}

.assignee-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #383838;
    border-radius: 20px;
    padding: 3px 6px 3px 3px;
    font-size: 12px;
    max-width: 100%;
}

/* Department/group chip (e.g. "Design Team") -- a violet border keeps it
   visually distinct from individual-person chips at a glance. */
.assignee-chip-group {
    border: 1px solid rgba(160, 110, 255, 0.5);
    background-color: rgba(160, 110, 255, 0.12);
}

.assignee-chip-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.assignee-chip-name {
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assignee-chip-remove {
    background: transparent;
    color: #999;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.assignee-chip-remove:hover {
    background-color: rgba(255,255,255,0.12);
    color: #fff;
}

.assign-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: #232323;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.assign-dropdown-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #777;
    margin: 10px 8px 6px;
}

.assign-dropdown-label:first-child {
    margin-top: 4px;
}

.assign-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #ddd;
}

.assign-option:hover {
    background-color: #2d2d2d;
}

.assign-option.checked {
    background-color: rgba(255, 140, 50, 0.12);
}

.assign-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.assign-option-check {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid #4a4a4a;
    background-color: #1e1e1e;
    flex-shrink: 0;
    position: relative;
}

.assign-option.checked .assign-option-check {
    background-color: #ff8c32;
    border-color: #ff8c32;
}

.assign-option.checked .assign-option-check::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.assign-option.partial .assign-option-check {
    background-color: rgba(255, 140, 50, 0.4);
    border-color: #ff8c32;
}

.assign-option-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-option-count {
    font-size: 11px;
    color: #777;
}

.department-option {
    color: #ff8c32;
    font-weight: 700;
}

.assign-dropdown-empty {
    padding: 14px 8px;
    text-align: center;
    color: #777;
    font-size: 12px;
}

.av-orange { background-color: rgba(255, 140, 50, 0.25); color: #ff8c32; }
.av-blue   { background-color: rgba(76, 110, 245, 0.25); color: #7c9bff; }
.av-green  { background-color: rgba(80, 200, 120, 0.25); color: #64d68a; }
.av-violet { background-color: rgba(160, 110, 255, 0.25); color: #c3a3ff; }

/* Comment list empty state gets a little breathing room to match the
   rest of the panel instead of sitting flush against the filter card. */
.comment-list .empty-state {
    text-align: center;
    margin-top: 24px;
}

/* ===================== Halo import warning (page3) =====================
   Distinct from .error-text (which is a hard failure) -- this is an
   informational/attention banner for partial import issues (unmatched
   names, ambiguous placements) that don't block creating the environment. */

.import-warning-text {
    color: #ffb066;
    background-color: rgba(255, 140, 50, 0.1);
    border: 1px solid rgba(255, 140, 50, 0.35);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 14px;
    padding: 12px 16px;
    max-width: 460px;
    text-align: left;
}

/* ===================== Needs-location badge + queue button (page4) ===================== */

.badge-needs-location {
    background-color: rgba(255, 140, 50, 0.22);
    color: #ffb066;
    font-weight: 700;
}

.comment-item.needs-location {
    background-color: rgba(255, 140, 50, 0.14);
}

.comment-item.needs-location:hover {
    background-color: rgba(255, 140, 50, 0.2);
}

/* Excluded-from-export comments in the left-hand list are dimmed (not
   hidden) so they're still findable, but visually recede from comments
   that will actually make it into the exported PDF. */
.comment-item.is-suppressed {
    opacity: 0.6;
}

.count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 10px;
    background-color: #ff8c32;
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}

#resolveQueueBtn {
    display: inline-flex;
    align-items: center;
}

/* ===================== Location picker panel (page4 right panel) =====================
   Shown in place of the normal comment thread whenever a comment's
   needs_location flag is set, so the user resolves ambiguous Halo-import
   placements without leaving the review flow. */

.location-picker-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background-color: rgba(255, 140, 50, 0.1);
    border: 1px solid rgba(255, 140, 50, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #ffb066;
}

.location-picker-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.4;
}

.location-option-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    background-color: #2c2c2c;
    color: white;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.location-option:hover {
    border-color: #ff8c32;
    background-color: rgba(255, 140, 50, 0.1);
}

/* Persists after the mouse leaves -- unlike :hover, this marks the option
   the user has actually chosen (but not yet confirmed). A checkmark makes
   the staged-but-unconfirmed state unambiguous at a glance. */
.location-option.selected {
    border-color: #ff8c32;
    background-color: rgba(255, 140, 50, 0.16);
}

.location-option.selected::after {
    content: "✓";
    color: #ff8c32;
    font-weight: 700;
    margin-left: 8px;
}

.location-option-page {
    color: #f0f0f0;
}

.location-option-hint {
    color: #888;
    font-size: 11px;
    font-weight: 500;
}

/* Highlight shown when hovering a location option, previewing where that
   candidate sits in the document. Same visual language as a normal
   highlight but dashed, since it's a preview rather than a saved placement. */
.highlight-mark.candidate-preview {
    background-color: rgba(124, 155, 255, 0.35);
    outline: 2px dashed #7c9bff;
    outline-offset: 1px;
}


.explorer-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    border-radius: 25px;
    border: 1px solid #3a3a3a;
    background-color: #2c2c2c;
    color: white;
    height: auto;
    transition: all 0.2s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 12px rgba(0,0,0,0.25);
}

.explorer-search::placeholder {
    color: #888;
}

.explorer-search:focus {
    outline: none;
    border-color: #ff8c32;
    box-shadow:
        0 0 0 4px rgba(255,140,50,0.15),
        0 6px 20px rgba(0,0,0,0.35);
}


.explorer-search::-webkit-search-cancel-button,
.explorer-search::-webkit-search-decoration {
    -webkit-appearance: none;
}


.folder-tile {
    position: relative;
}
 
.folder-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.35);
    color: #d99;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
 
.folder-tile:hover .folder-delete-btn {
    opacity: 1;
}
 
.folder-delete-btn:hover {
    background-color: rgba(200, 80, 80, 0.25);
    color: #ff8080;
}
 
 
/* ============================================================
   REPLACE the existing .topbar-menu-chevron rule (page4) with this.
   ============================================================
   The old version nudged a TEXT character (⌄) with translateY, which
   can't reliably center because text glyphs don't have predictable,
   consistent bounding-box metrics across browsers/fonts. This version
   pairs with an inline SVG chevron in page4.html's markup instead --
   an SVG's viewBox gives an exact, predictable box that plain flexbox
   can center correctly, no guessed pixel offsets needed. */
 
.topbar-menu-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    color: currentColor;
    transition: transform 0.18s ease;
    transform: translateY(1px);
}
 
.topbar-menu-chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}
 
.topbar-menu.open .topbar-menu-chevron {
    transform: rotate(180deg);
}

/* ===================== Dashboard (page2 welcome screen) =====================
   Redesigned around one idea: lead with what the person actually needs to
   do, not with everything that exists. The "focus panel" is the AI-written
   recap plus a short, ranked list of the handful of comments most worth
   clicking into right now. The full comment list below it is unchanged in
   spirit (still filterable, still complete) but no longer tries to carry
   priority signals itself -- that's the focus panel's job, so the full
   list can stay calm and scannable. */

.dashboard-page-container {
    justify-content: flex-start;
    height: auto;
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: 70px;
    padding-bottom: 60px;
}

.dashboard-topzone {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dashboard-topzone h1 {
    margin-bottom: 28px;
}

.dashboard-actions-row {
    display: flex;
    gap: 14px;
}

/* Buttons sit side by side -- both are equally valid entry points, so
   equal visual weight reads faster than a vertical stack implying one is
   the "main" choice. */
.dashboard-actions-row .access-existing,
.dashboard-actions-row .create-new {
    width: 200px;
    height: 54px;
    margin-bottom: 0;
}

.dashboard-content {
    width: 100%;
    max-width: 640px;
}

/* -------- Focus panel: AI recap + top priority items -------- */

.focus-panel {
    width: 100%;
    box-sizing: border-box;
    background-color: #232323;
    border: 1px solid #3a3a3a;
    border-left: 3px solid #ff8c32;
    border-radius: 14px;
    padding: 20px 22px;
    margin-top: 28px;
}

.focus-panel-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
}

.focus-icon {
    color: #ff8c32;
    font-size: 16px;
    line-height: 1.5;
    flex-shrink: 0;
}

.focus-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff8c32;
    margin-bottom: 5px;
}

.focus-summary {
    font-size: 14.5px;
    line-height: 1.6;
    color: #e8e8e8;
    margin: 0;
}

.focus-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.focus-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    background-color: #1c1c1c;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    text-align: left;
    font-family: Arial, sans-serif;
}

.focus-item:hover {
    border-color: #ff8c32;
    background-color: #262626;
}

.focus-item-pill {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 10px;
    text-align: center;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.06);
    color: #999;
}

.focus-item-pill.urgent    { background-color: rgba(255, 90, 90, 0.18);   color: #ff8080; }
.focus-item-pill.high      { background-color: rgba(255, 140, 50, 0.18);  color: #ff8c32; }
.focus-item-pill.notable   { background-color: rgba(124, 155, 255, 0.18); color: #7c9bff; }
.focus-item-pill.placement { background-color: rgba(160, 110, 255, 0.2);  color: #c3a3ff; }

.focus-item-main {
    flex: 1;
    min-width: 0;
}

.focus-item-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: #888;
    margin-bottom: 3px;
}

.focus-item-doc {
    color: #ffb066;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-item-meta {
    flex-shrink: 0;
}

.focus-item-quote {
    font-style: italic;
    color: #888;
    font-size: 12px;
    margin: 0 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-item-body {
    font-size: 13.5px;
    color: #f0f0f0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-item-reason {
    font-size: 12px;
    color: #7c9bff;
    margin-top: 4px;
}

.focus-item-chevron {
    flex-shrink: 0;
    color: #666;
    font-size: 20px;
}

/* -------- Full comment list -------- */

.dashboard-panel {
    width: 100%;
    margin-top: 32px;
}

.dashboard-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dashboard-header h2 {
    font-size: 18px;
    margin: 0;
}

.dashboard-count {
    font-size: 12.5px;
    color: #888;
}

#dashboardFilter {
    margin-bottom: 16px;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-comment-card {
    position: relative;
    background-color: #232323;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    text-align: left;
}

.dashboard-comment-card:hover {
    border-color: #4a4a4a;
    background-color: #262626;
}

.dashboard-comment-card.is-resolved {
    opacity: 0.55;
}

.dashboard-comment-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.dashboard-comment-doc {
    font-size: 13px;
    font-weight: 600;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-comment-meta {
    font-size: 11.5px;
    color: #888;
    flex-shrink: 0;
}

.dashboard-comment-body {
    font-size: 14px;
    line-height: 1.5;
    color: #eee;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-comment-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-comment-footer .badge {
    margin: 0;
}

.badge-reply {
    background-color: rgba(150, 150, 150, 0.2);
    color: #bbb;
}

/* -------- Loading skeleton -------- */

.dashboard-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-card {
    height: 76px;
    border-radius: 12px;
    background: linear-gradient(90deg, #232323 0%, #2a2a2a 50%, #232323 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-card {
        animation: none;
        background: #262626;
    }
}

.retry-btn {
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #ccc;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 14px;
    margin-left: 8px;
    cursor: pointer;
}

.retry-btn:hover {
    border-color: #666;
}

.dashboard-list .empty-state {
    text-align: center;
    margin-top: 4px;
}

/* Small screens: stack the two entry buttons, and let focus items wrap
   their meta line instead of overflowing. */
@media (max-width: 480px) {
    .dashboard-actions-row {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .dashboard-actions-row .access-existing,
    .dashboard-actions-row .create-new {
        width: 240px;
    }
    .focus-item {
        flex-wrap: wrap;
    }
    .focus-item-head {
        flex-wrap: wrap;
    }
}

.crystalLanding {
    min-height: 100vh;
    color: white;
    position: relative;
    min-height: 100vh;
    color: white;
    position: relative;
    overflow: hidden;
}
 
.crystalLanding__logoContainer {
    height: 120px;
}
 
.crystalLanding__contentContainer {
    padding-left: 100px;
    max-width: 1200px;
}
 
.crystalLanding__headline {
    font-size: 50px;
    font-weight: 450;
    line-height: 1.3;
    margin-bottom: 40px;
    width: 1050px;
}
 
.crystalLanding__description {
    font-size: 22px;
    line-height: 2;
    max-width: 1200px;
    margin-bottom: 60px;
    font-family: 'CrystalMono', monospace;
    color:#e9e9e9;
}
 
.crystalLanding__ctaButton {
    background-color: #ff9640;
    color: white;
    border: none;
    border-radius: 28px;
    padding: 20px 34px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}
 
.crystalLanding__graphicContainer {
    position: absolute;
    right: 0;
    top: 0;
}
 
.crystalLanding__logoContainer {
    padding-top: 60px;
    padding-left: 100px;
    margin-bottom: 30px;
}
 
.crystalLanding__logo {
    width: 180px;
    height: auto;
    display: block;
}
.crystalLanding__graphicContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
 
.crystalLanding__backgroundGraphic {
    width: 700px;
    height: auto;
    opacity: 0.7;
    position: absolute;
    top: -70px;
    right: -80px;
    transform: scaleX(-1);
}
 
.crystalLanding__contentContainer {
    position: relative;
    z-index: 2;
    padding-left: 100px;
    max-width: 900px;
}
 
.crystalLanding__eyebrow {
    font-size: 22px;
    font-weight: 100;
    color: rgba(255,255,255,.7);
    margin-bottom: 40px;
    letter-spacing: 1px;
    position: relative;
    top: 10px;
}
 
.crystalLanding__backgroundGraphicBottom {
    position: absolute;
    width: 700px;
    left: -300px;
    bottom: -120px;
    opacity: 0.65;
    transform: scaleX(-1);
}
.crystalLanding__contactButton {
    position: absolute;
    top: 55px;
    right: 100px;
    background-color: #ff9640;
    color: white;
    border: none;
    border-radius: 28px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    z-index: 5;
}

/* ===================== Name combobox (landing page, replaces the plain
   <select> that got unwieldy once the name list grew) =====================
   Same visual language as the old select: #252525 fill, 18px radius, the
   same inset+drop box-shadow, and the standard orange focus glow used on
   select/.explorer-search/.code-box elsewhere in this file. Built as its
   own component (not just a `select` override) because it needs a results
   panel and a clear button the native element can't give it. */

.combobox {
    position: relative;
    width: 320px;
    max-width: 90vw;
}

.combobox-field {
    position: relative;
    display: flex;
    align-items: center;
}

.combobox-input {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 46px 15px 25px;
    font-size: 20px;
    font-family: Arial, sans-serif;
    border-radius: 18px;
    border: 1px solid #3a3a3a;
    background-color: #252525;
    color: white;
    height: 60px;
    outline: none;
    transition: all 0.25s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 12px rgba(0,0,0,0.25);
}

.combobox-input::placeholder {
    color: #888;
}

.combobox-input:hover {
    background-color: #2d2d2d;
    border-color: #4a4a4a;
}

.combobox-input:focus {
    outline: none;
    border-color: #ff8c32;
    box-shadow:
        0 0 0 4px rgba(255,140,50,0.15),
        0 6px 20px rgba(0,0,0,0.35);
}

.combobox-input:disabled {
    opacity: .6;
    cursor: wait;
}

.combobox-clear {
    position: absolute;
    right: 10px;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #999;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.18s ease;
}

.combobox-clear.visible {
    display: flex;
}

.combobox-clear:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.combobox-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: #232323;
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
}

.combobox.open .combobox-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.combobox-option {
    padding: 12px 14px;
    border-radius: 9px;
    cursor: pointer;
    color: white;
    font-size: 16px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease;
}

.combobox-option mark {
    background-color: rgba(255, 140, 50, 0.35);
    color: white;
    border-radius: 3px;
    padding: 0 2px;
}

.combobox-option.active,
.combobox-option:hover {
    background-color: #2d2d2d;
}

.combobox-empty,
.combobox-hint {
    padding: 12px 14px;
    color: #888;
    font-size: 14px;
    font-style: italic;
    cursor: default;
}

.combobox-list::-webkit-scrollbar {
    width: 8px;
}

.combobox-list::-webkit-scrollbar-thumb {
    background-color: #3a3a3a;
    border-radius: 4px;
}

@media (max-width: 480px) {
    .combobox {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .combobox-list,
    .combobox-input {
        transition: none;
    }
}

.access-notices {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
 
.access-notice-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 176, 102, 0.08);
    border: 1px solid rgba(255, 176, 102, 0.3);
    border-radius: 14px;
    padding: 14px 18px;
    text-align: left;
}
 
.access-notice-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
 
.access-notice-icon {
    flex-shrink: 0;
    font-size: 18px;
    color: #ffb066;
}
 
.access-notice-text {
    min-width: 0;
}
 
.access-notice-title {
    font-size: 14px;
    font-weight: 600;
    color: #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
.access-notice-sub {
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
}
 
.access-notice-btn {
    flex-shrink: 0;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 18px;
    background-color: #ff8c32;
    color: white;
    white-space: nowrap;
}
 
.access-notice-btn:disabled {
    background-color: #3a3a3a;
    color: #999;
    cursor: default;
}
 
/* -------- Digest loading state (summary/scores still in flight) -------- */
 
/* Shown briefly in place of the focus panel while /me/digest is still
   resolving -- comments themselves are already rendered by this point
   (that's the whole point of the split), this is only covering the
   AI-recap portion catching up. */
.focus-panel-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 13px;
    padding: 4px 2px;
}
 
.focus-panel-loading .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff8c32;
    animation: focus-loading-pulse 1.2s ease-in-out infinite;
}
 
.focus-panel-loading .dot:nth-child(2) { animation-delay: 0.15s; }
.focus-panel-loading .dot:nth-child(3) { animation-delay: 0.3s; }
 
@keyframes focus-loading-pulse {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}
 
@media (prefers-reduced-motion: reduce) {
    .focus-panel-loading .dot {
        animation: none;
        opacity: 0.7;
    }
}