/*
 * Workspace modules: Leave, Meetings, Attendance timer, Chat, dashboard widgets.
 * Colours come from the theme tokens in theme.css (--t-*), so every component
 * follows the light / dark switch.
 */

:root {
    --ws-radius: 14px;
    --ws-line: var(--t-border);
    --ws-line-strong: var(--t-border-strong);
    --ws-muted: var(--t-muted);
    --ws-accent: var(--t-primary);
    --ws-ok: var(--t-success);
    --ws-danger: var(--t-danger);
}

/* The layout's .wrapper sets white-space: nowrap on every page; let workspace components wrap normally */
.ws-page-head, .ws-hero, .ws-stats, .ws-card, .ws-meeting, .ws-toasts, .ws-bell-menu, .ws-timer-menu, .chat-app, .modal { white-space: normal; }

.ws-muted { color: var(--t-muted) !important; }
.ws-section-title { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); margin-bottom: .75rem; font-weight: 600; }
.ws-card { background: var(--t-surface); border-radius: var(--ws-radius); border: 1px solid var(--t-border); box-shadow: var(--t-shadow); padding: 1.25rem; margin-bottom: 1.5rem; color: var(--t-text); }
.ws-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ws-card-header h5, .ws-card-header h6 { margin: 0; color: var(--t-heading); font-weight: 600; }
.ws-card-header h6 i { color: var(--t-primary); }
.ws-empty { text-align: center; padding: 2rem 1rem; color: var(--t-muted); }
.ws-empty i { font-size: 2.4rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* Page header (dashboard) */
.ws-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.ws-page-head h4 { margin: 0; font-weight: 600; color: var(--t-heading); }
.ws-page-head p { margin: .25rem 0 0; color: var(--t-muted); }

/* Hero / welcome strip */
.ws-hero { position: relative; overflow: hidden; border-radius: var(--ws-radius); padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; color: #fff;
    background: linear-gradient(115deg, var(--t-hero-from), var(--t-hero-to)); box-shadow: var(--t-shadow); }
.ws-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgb(255 255 255 / 8%); pointer-events: none; }
.ws-hero h4 { margin: 0 0 .25rem; font-weight: 600; color: #fff; }
.ws-hero .ws-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: rgb(255 255 255 / 80%); font-size: .9rem; }
.ws-hero .ws-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
.ws-hero .btn-hero { background: rgb(255 255 255 / 14%); border: 1px solid rgb(255 255 255 / 28%); color: #fff; }
.ws-hero .btn-hero:hover { background: rgb(255 255 255 / 24%); color: #fff; }
.ws-level { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem;
    background: rgb(255 255 255 / 18%); border: 1px solid rgb(255 255 255 / 30%); color: #fff; }
.ws-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-success); box-shadow: 0 0 0 0 rgb(34 197 94 / 60%); animation: ws-pulse 2s infinite; display: inline-block; }
@keyframes ws-pulse { 0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 55%); } 70% { box-shadow: 0 0 0 8px rgb(34 197 94 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0%); } }

/* Stat tiles */
.ws-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ws-stat { display: flex; gap: .9rem; align-items: center; background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--ws-radius);
    box-shadow: var(--t-shadow); padding: 1rem 1.1rem; color: var(--t-text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; min-width: 0; }
a.ws-stat:hover { transform: translateY(-2px); border-color: var(--t-border-strong); box-shadow: var(--t-shadow-lg); color: var(--t-text); }
.ws-stat > div:last-child { min-width: 0; }
.ws-stats-wrap .ws-stat-label, .ws-stats-wrap .ws-stat-sub { white-space: normal; overflow: visible; }
.ws-stat-icon { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.45rem; background: var(--t-primary-soft); color: var(--t-primary); }
.ws-stat-icon.teal { background: var(--t-teal-soft); color: var(--t-teal); }
.ws-stat-icon.indigo { background: var(--t-primary-soft); color: var(--t-primary); }
.ws-stat-icon.amber { background: var(--t-warning-soft); color: var(--t-warning); }
.ws-stat-icon.rose { background: var(--t-danger-soft); color: var(--t-danger); }
.ws-stat-icon.green { background: var(--t-success-soft); color: var(--t-success); }
.ws-stat-label { font-size: .8rem; color: var(--t-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-stat-value { font-size: 1.45rem; font-weight: 600; margin: 0; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--t-heading); }
.ws-stat-sub { font-size: .75rem; color: var(--t-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Progress meter */
.ws-meter { height: 8px; border-radius: 99px; background: var(--t-surface-2); overflow: hidden; }
.ws-meter > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--t-primary), var(--t-teal)); }

/* Lists */
.ws-list { list-style: none; margin: 0; padding: 0; }
.ws-list-item { display: flex; gap: .85rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--t-border); }
.ws-list-item:last-child { border-bottom: 0; }
.ws-list-item .ws-list-body { flex: 1; min-width: 0; }
.ws-list-item .ws-list-title { margin: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t-heading); }
.ws-list-item .ws-list-title a { color: var(--t-heading); }
.ws-list-item .ws-list-sub { margin: 0; font-size: .8rem; color: var(--t-muted); }
.ws-date-chip { flex: 0 0 52px; text-align: center; border-radius: 10px; background: var(--t-primary-soft); color: var(--t-primary); padding: .3rem 0; line-height: 1.1; }
.ws-date-chip .d { font-size: 1.2rem; font-weight: 600; display: block; }
.ws-date-chip .m { font-size: .7rem; text-transform: uppercase; opacity: .85; }
.ws-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: .8rem; font-weight: 600;
    background: linear-gradient(135deg, var(--t-primary), var(--t-teal)); color: #fff; }
.ws-avatar.sm { flex-basis: 28px; width: 28px; height: 28px; font-size: .7rem; border-radius: 8px; }
.ws-avatar-stack { display: flex; }
.ws-avatar-stack .ws-avatar { margin-left: -8px; border: 2px solid var(--t-surface); }
.ws-avatar-stack .ws-avatar:first-child { margin-left: 0; }

.ws-tag { display: inline-block; padding: .12rem .5rem; border-radius: 6px; font-size: .72rem; font-weight: 500; background: var(--t-surface-2); color: var(--t-text); }
.ws-tag.live { background: var(--t-success-soft); color: var(--t-success); }
.ws-tag.warn { background: var(--t-warning-soft); color: var(--t-warning); }
.ws-tag.danger { background: var(--t-danger-soft); color: var(--t-danger); }

/* Segmented filter tabs */
.ws-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.ws-tabs a { padding: .35rem .85rem; border-radius: 999px; color: var(--t-text); text-decoration: none; font-size: .85rem; background: var(--t-surface-2); border: 1px solid transparent; }
.ws-tabs a:hover { border-color: var(--t-border-strong); color: var(--t-heading); }
.ws-tabs a.active { background: var(--t-primary); color: #fff; }
.ws-tabs .count { margin-left: .3rem; opacity: .75; font-size: .75rem; }

/* Leave form */
.ws-type-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ws-type-picker input { display: none; }
.ws-type-picker label { cursor: pointer; border-radius: 12px; border: 1px solid var(--t-border-strong); padding: .75rem .5rem; text-align: center; background: var(--t-surface); color: var(--t-text); margin: 0; transition: border-color .15s, background .15s; }
.ws-type-picker label:hover { border-color: var(--t-primary); }
.ws-type-picker label i { font-size: 1.4rem; display: block; margin-bottom: .2rem; color: var(--t-primary); }
.ws-type-picker label small { color: var(--t-muted); display: block; font-size: .72rem; }
.ws-type-picker input:checked + label { background: var(--t-primary-soft); border-color: var(--t-primary); color: var(--t-heading); box-shadow: 0 0 0 1px var(--t-primary) inset; }
.ws-type-picker.ws-type-picker-4 { grid-template-columns: repeat(2, 1fr); }
.ws-history { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--t-border-strong); }
.ws-history li { position: relative; padding: 0 0 1rem .4rem; }
.ws-history li::before { content: ""; position: absolute; left: -1.53rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--t-primary); border: 2px solid var(--t-surface); }
.ws-history li.approved::before, .ws-history li.auto_approved::before { background: var(--t-success); }
.ws-history li.rejected::before { background: var(--t-danger); }
.ws-history li.cancelled::before { background: var(--t-muted); }
.ws-manager-table select { min-width: 200px; }
.ws-days-preview { border-radius: 10px; padding: .6rem .9rem; background: var(--t-primary-soft); color: var(--t-text); font-size: .9rem; }

/* Birthday / work anniversary cards */
.ws-celebration { padding-top: 1rem; }
.ws-equal-cards .ws-celebration { height: calc(100% - 1.5rem); }
.ws-celebration td:nth-child(2), .ws-celebration td:nth-child(3) { white-space: nowrap; }
.ws-celebration .ws-card-header h6 { position: relative; padding-left: .75rem; }
.ws-celebration .ws-card-header h6::before { content: ""; position: absolute; left: -1.25rem; top: -2px; bottom: -2px; width: 3px; border-radius: 3px; background: var(--t-primary); }
.ws-celebration-anniversary .ws-card-header h6::before { background: #84c341; }
.ws-celebration-birthday .ws-card-header h6 i { color: #db2777; }
.ws-celebration-anniversary .ws-card-header h6 i { color: #65a30d; }
.ws-celebration .table td, .ws-celebration .table th { padding-top: .65rem; padding-bottom: .65rem; }
.ws-today-row td { background: var(--t-success-soft) !important; }
.ws-celebrate-banner { margin-top: .4rem; font-size: .95rem; color: #fff; }

/* Weekly hours chart */
.ws-chart-box { position: relative; height: 220px; }

/* ---------- Header: theme switch, working timer, notification bell ---------- */
.ws-header-tools { display: flex; align-items: center; gap: .5rem; margin-right: .75rem; }
.ws-icon-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--t-surface-2);
    border: 1px solid var(--t-border); color: var(--t-text); font-size: 1.2rem; cursor: pointer; transition: background .15s, color .15s; }
.ws-icon-btn:hover { background: var(--t-primary-soft); color: var(--t-primary); }
.ws-timer { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; background: var(--t-surface-2);
    border: 1px solid var(--t-border); color: var(--t-heading); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.ws-timer:hover { border-color: var(--t-border-strong); }
.ws-timer .ws-timer-time { font-weight: 600; letter-spacing: .03em; }
.ws-timer i { font-size: 1.05rem; color: var(--t-primary); }
.ws-timer-menu { min-width: 260px; padding: .75rem 1rem; }
.ws-timer-menu h6 { color: var(--t-heading); }
.ws-timer-menu .row-line { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .88rem; color: var(--t-text); }
.ws-bell .ws-bell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--t-danger);
    color: #fff; font-size: .68rem; display: grid; place-items: center; border: 2px solid var(--t-topbar-bg); }
.ws-bell-menu { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.ws-bell-menu .ws-bell-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--t-border); color: var(--t-heading); }
.ws-bell-menu .ws-bell-head a, .ws-bell-menu [data-ws-desktop] { color: var(--t-primary) !important; }
.ws-bell-list { max-height: 380px; overflow-y: auto; }
.ws-bell-item { display: flex; gap: .7rem; padding: .75rem 1rem; color: var(--t-text); text-decoration: none; border-bottom: 1px solid var(--t-border); white-space: normal; }
.ws-bell-item:hover { background: var(--t-hover); color: var(--t-text); }
.ws-bell-item i { font-size: 1.3rem; margin-top: .1rem; color: var(--t-primary); }
.ws-bell-item p { margin: 0; font-size: .85rem; line-height: 1.35; }
.ws-bell-item p strong { color: var(--t-heading); }
.ws-bell-item small { color: var(--t-muted); }
.sidebar-wrapper .ws-menu-badge { margin-left: auto; background: var(--t-danger); color: #fff; border-radius: 9px; font-size: .68rem; padding: 0 6px; min-width: 18px; text-align: center; }

/* Toasts */
.ws-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100vw - 32px); }
.ws-toast { width: 330px; max-width: 100%; display: flex; gap: .7rem; padding: .85rem 1rem; border-radius: 12px; color: var(--t-text); text-decoration: none;
    background: var(--t-popover); border: 1px solid var(--t-border); border-left: 4px solid var(--t-primary); box-shadow: var(--t-shadow-lg); animation: ws-in .25s ease; }
.ws-toast:hover { color: var(--t-text); }
.ws-toast i { font-size: 1.4rem; color: var(--t-primary); }
.ws-toast p { margin: 0; font-size: .85rem; }
.ws-toast p strong { color: var(--t-heading); }
@keyframes ws-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Meetings ---------- */
.ws-meeting { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border-radius: 12px; background: var(--t-surface); border: 1px solid var(--t-border);
    margin-bottom: .75rem; color: var(--t-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.ws-meeting:hover { border-color: var(--t-border-strong); box-shadow: var(--t-shadow); color: var(--t-text); }
.ws-meeting.cancelled { opacity: .55; }
.ws-meeting .ws-meeting-body { flex: 1; min-width: 0; }
.ws-meeting h6 { margin: 0 0 .2rem; color: var(--t-heading); }
.ws-rsvp .btn { min-width: 96px; }
.ws-calendar .fc { --fc-border-color: var(--t-border); --fc-page-bg-color: var(--t-surface); --fc-neutral-bg-color: var(--t-surface-2);
    --fc-today-bg-color: var(--t-primary-soft); --fc-event-bg-color: var(--t-primary); --fc-event-border-color: var(--t-primary);
    --fc-list-event-hover-bg-color: var(--t-hover); color: var(--t-text); }
.ws-calendar .fc a { color: var(--t-text); text-decoration: none; }
.ws-calendar .fc .fc-toolbar-title { color: var(--t-heading); font-size: 1.25rem; }
.ws-calendar .fc .fc-button-primary { background: var(--t-surface); border-color: var(--t-border-strong); color: var(--t-text); }
.ws-calendar .fc .fc-button-primary:hover { background: var(--t-hover); color: var(--t-heading); }
.ws-calendar .fc .fc-button-primary:not(:disabled).fc-button-active, .ws-calendar .fc .fc-button-primary:not(:disabled):active { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }

/* ---------- Chat ---------- */
.chat-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100vh - 170px); min-height: 520px; border-radius: var(--ws-radius);
    overflow: hidden; border: 1px solid var(--t-border); background: var(--t-surface); box-shadow: var(--t-shadow); color: var(--t-text); }
.chat-app.thread-open { grid-template-columns: 280px minmax(0, 1fr) 340px; }
/* app.css ships a template chat (.chat-sidebar absolutely positioned, hidden at left:-370px on mobile); neutralise it */
.chat-app .chat-sidebar { position: relative; width: auto; height: auto; left: auto; top: auto; bottom: auto; z-index: auto; overflow: visible; border-radius: 0;
    border-right: 1px solid var(--t-border); }
.chat-app .chat-msg { font-size: inherit; color: var(--t-text); }
.chat-sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--t-surface-2); }
.chat-sidebar-head { padding: .9rem 1rem; border-bottom: 1px solid var(--t-border); }
.chat-search { position: relative; }
.chat-search input { padding-left: 2rem; }
.chat-search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--t-muted); }
.chat-nav { flex: 1; overflow-y: auto; padding: .5rem 0 1rem; }
.chat-nav-section { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem .3rem; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--t-muted); font-weight: 600; }
.chat-nav-section button { background: none; border: 0; color: var(--t-muted); font-size: 1.1rem; line-height: 1; padding: 0 .2rem; }
.chat-nav-section button:hover { color: var(--t-primary); }
.chat-nav-item { display: flex; align-items: center; gap: .55rem; padding: .4rem 1rem; margin: 0 .5rem; border-radius: 8px; color: var(--t-text); cursor: pointer; text-decoration: none; }
.chat-nav-item:hover { background: var(--t-hover); color: var(--t-heading); }
.chat-nav-item.active { background: var(--t-primary); color: #fff; }
.chat-nav-item.active i { color: #fff; }
.chat-nav-item.unread { color: var(--t-heading); font-weight: 600; }
.chat-nav-item i { color: var(--t-muted); }
.chat-nav-item .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-nav-item .badge-count { background: var(--t-danger); color: #fff; border-radius: 9px; font-size: .68rem; padding: 0 6px; min-width: 18px; text-align: center; }
.chat-nav-item .badge-count.mention { background: var(--t-warning); }

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--t-border); background: var(--t-surface); }
.chat-head .chat-title { flex: 1; min-width: 0; }
.chat-head h6 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t-heading); font-weight: 600; }
.chat-head small { color: var(--t-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .btn { padding: .25rem .55rem; }
.chat-back { display: none; }

.chat-stream { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; min-height: 0; }
.chat-day { display: flex; align-items: center; gap: .75rem; color: var(--t-muted); font-size: .75rem; margin: 1rem 0 .5rem; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; border-top: 1px solid var(--t-border); }
.chat-msg { display: flex; gap: .7rem; padding: .35rem .5rem; border-radius: 10px; position: relative; }
.chat-msg:hover { background: var(--t-hover); }
.chat-msg.highlight { background: var(--t-warning-soft); }
.chat-msg.compact { padding-top: .05rem; }
.chat-msg.compact .ws-avatar { visibility: hidden; height: 0; }
.chat-msg .chat-msg-body { flex: 1; min-width: 0; }
.chat-msg .chat-meta { display: flex; gap: .5rem; align-items: baseline; }
.chat-msg .chat-meta strong { font-weight: 600; color: var(--t-heading); }
.chat-msg .chat-meta small { color: var(--t-muted); font-size: .72rem; }
.chat-msg .chat-text { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.5; }
.chat-msg .chat-text a { color: var(--t-primary); text-decoration: underline; }
.chat-msg .chat-text code { background: var(--t-surface-2); color: var(--t-danger); padding: 0 4px; border-radius: 4px; }
.chat-msg .chat-actions { position: absolute; right: .5rem; top: -.6rem; display: none; gap: .15rem; background: var(--t-popover); border: 1px solid var(--t-border);
    border-radius: 8px; padding: .15rem; box-shadow: var(--t-shadow); }
.chat-msg:hover .chat-actions { display: flex; }
.chat-actions button { background: none; border: 0; color: var(--t-text); padding: .15rem .4rem; border-radius: 6px; font-size: 1rem; }
.chat-actions button:hover { background: var(--t-hover); color: var(--t-primary); }
.chat-thread-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; font-size: .8rem; color: var(--t-primary); cursor: pointer; background: none; border: 0; padding: 0; font-weight: 500; }
.chat-mention { background: var(--t-primary-soft); color: var(--t-primary); border-radius: 4px; padding: 0 3px; font-weight: 500; }
.chat-mention-me { background: var(--t-warning-soft); color: var(--t-warning); }
.chat-deleted { color: var(--t-muted); }
.chat-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.chat-file { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-radius: 10px; background: var(--t-surface-2); border: 1px solid var(--t-border);
    color: var(--t-text); text-decoration: none; max-width: 260px; }
.chat-file:hover { color: var(--t-heading); border-color: var(--t-border-strong); }
.chat-file i { color: var(--t-primary); }
.chat-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.chat-file small { color: var(--t-muted); white-space: nowrap; }
.chat-image { display: block; max-width: 260px; max-height: 200px; border-radius: 10px; border: 1px solid var(--t-border); object-fit: cover; }
.chat-load-older { display: block; margin: 0 auto .75rem; }

.chat-composer { padding: .75rem 1.1rem 1rem; border-top: 1px solid var(--t-border); position: relative; }
.chat-composer-box { border: 1px solid var(--t-border-strong); border-radius: 12px; background: var(--t-input-bg); }
.chat-composer-box:focus-within { border-color: var(--t-primary); box-shadow: 0 0 0 3px var(--t-primary-soft); }
.chat-composer textarea { width: 100%; border: 0; background: transparent; color: var(--t-text); resize: none; padding: .7rem .9rem; outline: none; max-height: 160px; min-height: 44px; display: block; }
.chat-composer textarea::placeholder { color: var(--t-muted); }
.chat-composer-tools { display: flex; align-items: center; gap: .35rem; padding: .3rem .5rem; border-top: 1px solid var(--t-border); }
.chat-composer-tools .btn-icon { background: none; border: 0; color: var(--t-muted); font-size: 1.25rem; padding: .15rem .4rem; border-radius: 6px; }
.chat-composer-tools .btn-icon:hover { background: var(--t-hover); color: var(--t-primary); }
.chat-composer-tools .hint { font-size: .72rem; color: var(--t-muted); margin-left: auto; margin-right: .5rem; }
.chat-pending-files { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem .6rem 0; }
.chat-pending-files .chat-file { padding: .3rem .5rem; }
.chat-pending-files .chat-file button { background: none; border: 0; color: var(--t-muted); padding: 0 0 0 .3rem; }
.chat-mention-menu { position: absolute; bottom: 100%; left: 1.1rem; width: 260px; max-height: 220px; overflow-y: auto; background: var(--t-popover); border: 1px solid var(--t-border);
    border-radius: 10px; box-shadow: var(--t-shadow-lg); z-index: 20; display: none; }
.chat-mention-menu .item { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; cursor: pointer; color: var(--t-text); }
.chat-mention-menu .item.active, .chat-mention-menu .item:hover { background: var(--t-primary-soft); color: var(--t-heading); }
.chat-join-bar { padding: 1rem; text-align: center; border-top: 1px solid var(--t-border); }

.chat-thread { border-left: 1px solid var(--t-border); display: none; flex-direction: column; min-height: 0; background: var(--t-surface-2); }
.chat-app.thread-open .chat-thread { display: flex; }
.chat-thread .chat-stream { padding-top: .5rem; }
.chat-thread-parent { border-bottom: 1px solid var(--t-border); padding-bottom: .5rem; margin-bottom: .5rem; }

.chat-welcome { height: 100%; display: grid; place-items: center; text-align: center; color: var(--t-muted); padding: 2rem; }
.chat-welcome i { font-size: 3rem; display: block; margin-bottom: .5rem; opacity: .6; }

.chat-search-panel { position: absolute; inset: 0; background: var(--t-surface); z-index: 15; display: none; flex-direction: column; }
.chat-search-panel.open { display: flex; }
.chat-search-results { flex: 1; overflow-y: auto; padding: .5rem 1.1rem 1rem; }
.chat-search-results h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--t-muted); margin: 1rem 0 .4rem; }
.chat-search-hit { display: block; padding: .5rem .6rem; border-radius: 8px; color: var(--t-text); cursor: pointer; text-decoration: none; }
.chat-search-hit:hover { background: var(--t-hover); color: var(--t-heading); }
.chat-search-hit small { color: var(--t-muted); }
.chat-search-hit mark { background: var(--t-warning-soft); color: var(--t-heading); padding: 0 1px; border-radius: 3px; }
.chat-main-wrap { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.chat-member-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--t-border); color: var(--t-text); }
.chat-member-row:last-child { border-bottom: 0; }
.chat-member-row .grow { flex: 1; min-width: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .chat-app.thread-open { grid-template-columns: 240px minmax(0, 1fr); }
    .chat-app.thread-open .chat-thread { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 100%); z-index: 16; box-shadow: var(--t-shadow-lg); }
    .chat-app { position: relative; grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .chat-app, .chat-app.thread-open { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 140px); }
    .chat-app .chat-main-wrap { display: none; }
    .chat-app.conversation-open .chat-sidebar { display: none; }
    .chat-app.conversation-open .chat-main-wrap { display: flex; }
    .chat-back { display: inline-block; }
    .chat-image, .chat-file { max-width: 200px; }
    .ws-timer .ws-timer-label { display: none; }
    .ws-header-tools { margin-right: .25rem; gap: .35rem; }
    .ws-type-picker { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
    .ws-hero { padding: 1.1rem; }
    .ws-stat-value { font-size: 1.2rem; }
}
@media (max-width: 420px) {
    .ws-timer { padding: .3rem .55rem; }
    .ws-timer i { display: none; }
    .ws-icon-btn { width: 34px; height: 34px; }
}