/* Reviewer console — shadcn/ui design language (shared tokens with the admin). Sidebar shell + message list | reading pane. Light + dark (system default, overridable by .dark/.light on ). Also styles login.html. */ :root { --background: oklch(1 0 0); --foreground: oklch(0.129 0.042 264.695); --card: oklch(1 0 0); --card-foreground: oklch(0.129 0.042 264.695); --popover: oklch(1 0 0); --popover-foreground: oklch(0.129 0.042 264.695); --primary: oklch(0.208 0.042 265.755); --primary-foreground: oklch(0.984 0.003 247.858); --secondary: oklch(0.968 0.007 247.896); --secondary-foreground: oklch(0.208 0.042 265.755); --muted: oklch(0.968 0.007 247.896); --muted-foreground: oklch(0.554 0.046 257.417); --accent: oklch(0.968 0.007 247.896); --accent-foreground: oklch(0.208 0.042 265.755); --destructive: oklch(0.577 0.245 27.325); --success: oklch(0.52 0.13 160); --warning: oklch(0.62 0.14 60); --border: oklch(0.929 0.013 255.508); --input: oklch(0.929 0.013 255.508); --ring: oklch(0.704 0.04 256.788); --radius: 0.625rem; --sidebar: oklch(0.984 0.003 247.858); --shadow-sm: 0 1px 2px 0 oklch(0.129 0.042 264.695 / 0.05); --shadow-md: 0 4px 12px oklch(0.129 0.042 264.695 / 0.08); --shadow-lg: 0 16px 40px oklch(0.129 0.042 264.695 / 0.18); } .dark { --background: oklch(0.129 0.042 264.695); --foreground: oklch(0.984 0.003 247.858); --card: oklch(0.14 0.04 259.21); --card-foreground: oklch(0.984 0.003 247.858); --popover: oklch(0.208 0.042 265.755); --popover-foreground: oklch(0.984 0.003 247.858); --primary: oklch(0.929 0.013 255.508); --primary-foreground: oklch(0.208 0.042 265.755); --secondary: oklch(0.279 0.041 260.031); --secondary-foreground: oklch(0.984 0.003 247.858); --muted: oklch(0.279 0.041 260.031); --muted-foreground: oklch(0.704 0.04 256.788); --accent: oklch(0.279 0.041 260.031); --accent-foreground: oklch(0.984 0.003 247.858); --destructive: oklch(0.704 0.191 22.216); --success: oklch(0.6 0.13 160); --warning: oklch(0.72 0.15 70); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.551 0.027 264.364); --sidebar: oklch(0.14 0.04 259.21); --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.4); --shadow-md: 0 6px 16px oklch(0 0 0 / 0.45); --shadow-lg: 0 18px 44px oklch(0 0 0 / 0.6); } @media (prefers-color-scheme: dark) { :root:not(.light) { --background: oklch(0.129 0.042 264.695); --foreground: oklch(0.984 0.003 247.858); --card: oklch(0.14 0.04 259.21); --card-foreground: oklch(0.984 0.003 247.858); --popover: oklch(0.208 0.042 265.755); --popover-foreground: oklch(0.984 0.003 247.858); --primary: oklch(0.929 0.013 255.508); --primary-foreground: oklch(0.208 0.042 265.755); --secondary: oklch(0.279 0.041 260.031); --secondary-foreground: oklch(0.984 0.003 247.858); --muted: oklch(0.279 0.041 260.031); --muted-foreground: oklch(0.704 0.04 256.788); --accent: oklch(0.279 0.041 260.031); --accent-foreground: oklch(0.984 0.003 247.858); --destructive: oklch(0.704 0.191 22.216); --success: oklch(0.6 0.13 160); --warning: oklch(0.72 0.15 70); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.551 0.027 264.364); --sidebar: oklch(0.14 0.04 259.21); --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.4); --shadow-md: 0 6px 16px oklch(0 0 0 / 0.45); --shadow-lg: 0 18px 44px oklch(0 0 0 / 0.6); } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--muted-foreground) 40%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } a { color: inherit; text-decoration: none; } svg { display: inline-block; vertical-align: middle; } /* ── Controls ─────────────────────────────────────────────── */ button { font: inherit; font-weight: 500; cursor: pointer; border-radius: calc(var(--radius) - 2px); border: 1px solid transparent; padding: 8px 14px; background: var(--primary); color: var(--primary-foreground); transition: background 0.12s, opacity 0.12s, box-shadow 0.12s; white-space: nowrap; } button:hover { opacity: 0.9; } button:active { transform: translateY(0.5px); } button:disabled { opacity: 0.5; cursor: not-allowed; } button.ghost { background: transparent; color: var(--foreground); } button.ghost:hover { background: var(--accent); opacity: 1; } button.outline { background: var(--background); color: var(--foreground); border-color: var(--border); } button.outline:hover { background: var(--accent); opacity: 1; } button.secondary { background: var(--secondary); color: var(--secondary-foreground); } button.small { padding: 5px 10px; font-size: 12.5px; } button.icon { padding: 7px; width: 34px; height: 34px; display: inline-grid; place-items: center; } input, select, textarea { font: inherit; color: var(--foreground); background: var(--background); border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); padding: 8px 11px; transition: border-color 0.12s, box-shadow 0.12s; } input::placeholder, textarea::placeholder { color: var(--muted-foreground); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent); } label { font-size: 12.5px; font-weight: 500; } .sub, .hint { color: var(--muted-foreground); font-size: 12.5px; } /* ── Badges / chips ───────────────────────────────────────── */ .badge, .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .badge.secondary, .chip { background: var(--secondary); color: var(--secondary-foreground); } .badge.outline { background: transparent; border-color: var(--border); color: var(--muted-foreground); } .chip.classified { background: color-mix(in oklch, var(--success) 16%, transparent); color: var(--success); } .chip.unclassified { background: color-mix(in oklch, var(--warning) 18%, transparent); color: var(--warning); } .chip.attach { background: color-mix(in oklch, var(--primary) 12%, transparent); color: var(--foreground); } /* ── Shell ────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: 256px 1fr; height: 100vh; } .sidebar { background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; overflow: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-weight: 650; font-size: 15px; } .brand .logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--primary); color: var(--primary-foreground); font-size: 16px; } .brand small { display: block; font-weight: 400; font-size: 11px; color: var(--muted-foreground); } .nav { padding: 6px 10px 18px; display: flex; flex-direction: column; gap: 2px; } .nav-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-foreground); padding: 14px 10px 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: calc(var(--radius) - 2px); color: var(--foreground); font-weight: 500; cursor: pointer; user-select: none; transition: background 0.12s; } .nav-item:hover { background: var(--accent); } .nav-item.active { background: var(--primary); color: var(--primary-foreground); } .nav-item svg { width: 17px; height: 17px; opacity: 0.9; } .nav-item .count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted-foreground); } .nav-item.active .count { color: var(--primary-foreground); opacity: 0.85; } .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .topbar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--background) 85%, transparent); backdrop-filter: blur(6px); } .topbar .crumb { font-weight: 600; } .topbar .spacer { flex: 1; } .searchbar { flex: 1 1 auto; max-width: 460px; display: flex; align-items: center; gap: 8px; } .search-wrap { position: relative; flex: 1 1 auto; } .search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); } .searchbar input { width: 100%; background: var(--muted); border-color: transparent; border-radius: 999px; padding-left: 34px; } .searchbar input:focus { background: var(--background); } .searchbar input.domain { max-width: 150px; padding-left: 11px; } .badge#workCount { font-weight: 600; } .userchip { display: flex; align-items: center; gap: 9px; } .userchip .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; } .userchip .whom { line-height: 1.15; display: flex; flex-direction: column; max-width: 160px; } .userchip .whom .email { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .userchip .whom .role { font-size: 11px; color: var(--muted-foreground); text-transform: capitalize; } .mailmain { flex: 1; min-height: 0; display: flex; } /* ── Split (list | reader) ────────────────────────────────── */ .grid-2 { flex: 1 1 auto; display: flex; min-width: 0; } .gcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .gcol-left { flex: 0 0 var(--split, 360px); min-width: 300px; max-width: 60%; } .gcol-right { flex: 1 1 0; min-width: 420px; position: relative; } .gutter { flex: 0 0 12px; align-self: stretch; cursor: col-resize; position: relative; touch-action: none; } .gutter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: var(--border); } .gutter:hover::before { width: 3px; background: var(--ring); } body.col-resizing { cursor: col-resize; user-select: none; } .grid-2.detail-max > .gcol-left, .grid-2.detail-max > .gutter { display: none; } .grid-2.detail-max > .gcol-right { flex: 1 1 100%; } /* ── Message list ─────────────────────────────────────────── */ .listpane { border-right: 1px solid var(--border); background: var(--background); } .listhead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .listhead input { flex: 1 1 auto; } .listwrap { flex: 1 1 auto; overflow: auto; min-height: 0; } .mail-list { list-style: none; margin: 0; padding: 0; } .mail-item { display: flex; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; transition: background 0.1s; } .mail-item:hover { background: color-mix(in oklch, var(--muted) 55%, transparent); } .mail-item.selected { background: color-mix(in oklch, var(--primary) 8%, transparent); } .mail-item.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); } .mail-item .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; margin-top: 1px; flex: 0 0 auto; } .mail-main { flex: 1 1 auto; min-width: 0; } .mail-row1 { display: flex; align-items: baseline; gap: 10px; } .mail-from { font-weight: 650; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-time { flex: 0 0 auto; font-size: 12px; color: var(--muted-foreground); } .mail-subject { color: var(--foreground); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-snippet { color: var(--muted-foreground); font-size: 12.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } /* ── Reading pane ─────────────────────────────────────────── */ .readpane { background: var(--background); } .readhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); min-height: 48px; } .readhead .readtitle { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted-foreground); } .readhead .read-actions { display: flex; gap: 6px; } #fsInfoBtn { display: none; } .detail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; position: relative; } .detail-top { padding: 14px 20px 10px; } .detail-subject { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; } .detail-sender { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; } .detail-sender .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; } .detail-sender .who { min-width: 0; } .detail-sender .who .nm { font-weight: 650; } .detail-sender .who .adr { color: var(--muted-foreground); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; } .detail-metaline { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; color: var(--muted-foreground); font-size: 12.5px; } .detail-metaline b { color: var(--foreground); font-weight: 600; } .detail-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } iframe.body-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: none; border-top: 1px solid var(--border); background: #ffffff; } /* ── Full-screen reading ──────────────────────────────────── */ body.detail-fs { overflow: hidden; } body.detail-fs .gcol-right { position: fixed; inset: 0; z-index: 60; min-width: 0; background: var(--background); } body.detail-fs #fsInfoBtn { display: inline-block; } body.detail-fs #maxDetailBtn { display: none; } body.detail-fs .detail .body-frame { border: none; } body.detail-fs .fs-hideable { display: none; } body.detail-fs.detail-fs-info .fs-hideable { display: block; position: fixed; left: 0; right: 0; z-index: 65; background: var(--card); box-shadow: var(--shadow-lg); max-height: 46vh; overflow: auto; padding: 16px 20px; } body.detail-fs.detail-fs-info .detail-top { top: 48px; border-bottom: 1px solid var(--border); } /* ── Empty states ─────────────────────────────────────────── */ .empty-state { margin: auto; text-align: center; color: var(--muted-foreground); padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .empty-state .ico { font-size: 34px; opacity: 0.5; } .empty-state.small { padding: 18px; } /* ── Toasts ───────────────────────────────────────────────── */ #flash { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; } .flash-item { background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-left: 3px solid var(--primary); padding: 10px 14px; border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-md); font-size: 13px; max-width: 360px; animation: fadein 0.16s ease; } .flash-item.ok { border-left-color: var(--success); } .flash-item.error { border-left-color: var(--destructive); } @keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── Login (login.html) ───────────────────────────────────── */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 30px 28px; } .login-card h1 { margin: 0 0 4px; font-size: 21px; } .login-card .sub { display: block; margin-bottom: 20px; } .login-card .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .login-card input { width: 100%; } .login-card button[type="submit"] { width: 100%; margin-top: 8px; padding: 10px; } .login-error { display: none; color: var(--destructive); background: color-mix(in oklch, var(--destructive) 12%, transparent); border-radius: calc(var(--radius) - 2px); padding: 9px 11px; font-size: 13px; margin-bottom: 14px; } .login-error.show { display: block; } /* Embedded in the admin console: hide own sidebar + redundant topbar chrome. */ .embed .sidebar { display: none; } .embed .app { grid-template-columns: 1fr; } .embed .topbar { padding-left: 16px; } .embed .topbar .userchip, .embed #themeBtn, .embed .menu-btn { display: none; } .menu-btn { display: none; } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 40; transform: translateX(-100%); transition: transform 0.2s; box-shadow: var(--shadow-md); } .sidebar.open { transform: none; } .menu-btn { display: inline-grid; } .searchbar .domain { display: none; } .userchip .whom { display: none; } .grid-2 { flex-direction: column; } .gcol { flex: 1 1 auto; width: 100%; min-width: 0; } .gutter { display: none; } }