/* ClockIn's shared branding, with the pane layout and warm surfaces of WhatsApp Desk. */
.chat-desk { background:#f3efe6; color:#292720; }
.chat-desk .chat-shell { width:100%; max-width:var(--app-max-width); height:100dvh; min-height:540px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.chat-desk .menu { margin:0; padding:10px 14px; gap:3px; flex-shrink:0; }
.chat-desk .menu .clockin-brand { flex-basis:auto; margin:0 16px 0 0; padding:0 18px 0 0; border-bottom:0; border-right:1px solid #41413b; gap:10px; }
.chat-desk .brand-logo { width:44px; height:40px; }
.chat-desk .brand-copy strong { font-size:18px; }
.chat-desk .brand-copy small { font-size:10px; }
.chat-desk .menu a:not(.clockin-brand),.chat-desk .menu button { padding:7px 8px; font-size:12px; }
.desk-workspace { display:grid; grid-template-columns:190px 300px minmax(0,1fr); flex:1; min-height:0; gap:12px; }
.desk-rail,.desk-list-panel,.desk-thread { min-width:0; min-height:0; border:1px solid #ded5c7; border-radius:16px; background:#fffdf9; overflow:hidden; }
.desk-rail { display:flex; flex-direction:column; background:#f8f4ec; padding:22px 12px 14px; }
.rail-heading { padding:0 10px 22px; }
.eyebrow { font-size:10px; font-weight:750; letter-spacing:1.7px; color:#857456; }
.chat-desk h1 { font-size:23px; margin:7px 0; color:#383022; }
.rail-heading p { font-size:12px; color:#7b7365; margin:0; line-height:1.7; }
.chat-desk .rail-tab { display:flex; justify-content:space-between; align-items:center; padding:12px 10px; border:1px solid transparent; background:transparent; box-shadow:none; color:#686154; font-size:12px; font-weight:650; margin-bottom:6px; text-align:left; }
.chat-desk .rail-tab.selected { background:#f1e5c3; color:#594816; border-color:#e3d09b; }
.count { background:#ffffff90; border-radius:6px; font-size:10px; padding:2px 6px; }
.rail-note { margin:auto 10px 25px; padding-top:24px; color:#887b64; font-size:12px; }
.rail-note-icon { display:block; font-size:28px; margin-bottom:10px; color:#ae914a; }
.rail-note strong { font-size:12px; font-weight:600; }
.rail-note p { font-size:11px; line-height:1.8; }
.desk-identity { display:flex; align-items:center; gap:9px; padding:14px 4px 0; border-top:1px solid #e6ddce; }
.desk-identity strong { display:block; font-size:11px; overflow-wrap:anywhere; }
.desk-identity small { display:block; font-size:10px; color:#807769; }
.avatar { display:inline-flex; width:40px; height:40px; border-radius:13px; align-items:center; justify-content:center; background:#eee6d3; color:#776133; flex-shrink:0; font-weight:700; font-size:13px; }
.group-avatar { background:#e3eee8; color:#386e56; }
.desk-list-panel { display:flex; flex-direction:column; }
.list-heading { display:flex; justify-content:space-between; align-items:center; padding:22px 20px 14px; }
.chat-desk .list-heading h2 { margin:4px 0 0; font-size:23px; color:#383022; }
.search-field { margin:0 16px 16px; background:#f4f1ea; border:1px solid #e6e0d5; border-radius:9px; display:flex; align-items:center; gap:7px; padding:0 10px; }
.search-field > span { font-size:25px; color:#85796a; }
.chat-desk .search-field input { border:0; box-shadow:none; background:transparent; min-width:0; padding:11px 0; font-size:12px; }
.search-field:focus-within { outline:2px solid #b49746; outline-offset:2px; }
.list-caption { display:flex; align-items:center; justify-content:space-between; margin:0 18px 9px; font-size:10px; color:#857c6e; }
.chat-desk .text-button { font-size:10px; background:none; border:0; padding:3px; box-shadow:none; color:#77622e; }
.conversation-list { overflow:auto; flex:1; min-height:0; padding:0 8px 14px; }
.chat-desk .conversation-item { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:14px 10px; border:1px solid transparent; background:transparent; box-shadow:none; border-radius:10px; margin:2px 0; color:#302d27; }
.chat-desk .conversation-item:hover { background:#f7f2e7; transform:none; }
.chat-desk .conversation-item.selected { background:#f3ebd7; border-color:#e6d5a6; }
.conversation-copy { flex:1; min-width:0; }
.conversation-copy strong,.conversation-copy small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-copy strong { font-size:12px; font-weight:650; }
.conversation-copy small { font-size:11px; color:#887d6d; font-weight:400; margin-top:5px; }
.conversation-arrow { font-weight:400; color:#9c864e; }
.list-empty { font-size:12px; text-align:center; padding:30px 10px; color:#8b806e; }
.list-footer { border-top:1px solid #ede6da; padding:13px; text-align:center; font-size:10px; color:#928471; }
.desk-thread { display:flex; flex-direction:column; position:relative; }
.thread-header { display:flex; align-items:center; gap:12px; padding:17px 22px; border-bottom:1px solid #e4dbcb; flex-shrink:0; background:#fffdf9; position:relative; z-index:2; }
.thread-title { min-width:0; flex:1; }
.chat-desk .thread-title h2 { font-size:16px; margin:0; color:#393225; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-title p { font-size:11px; color:#8d806b; margin:4px 0 0; }
.thread-actions { display:flex; align-items:center; gap:8px; }
.chat-desk .thread-actions button { font-size:12px; padding:8px 12px; }
.thread-menu { position:relative; }
.thread-menu > summary { list-style:none; cursor:pointer; border:1px solid #ded5c7; width:35px; height:35px; display:flex; align-items:center; justify-content:center; border-radius:9px; font-size:23px; line-height:1; }
.thread-menu > summary::-webkit-details-marker { display:none; }
.menu-popover { position:absolute; top:45px; right:0; width:min(330px,calc(100vw - 48px)); max-height:60dvh; overflow-y:auto; padding:18px; border:1px solid #dbcfba; border-radius:13px; background:#fffdf9; box-shadow:0 14px 40px #32271620; display:flex; flex-direction:column; gap:10px; }
.chat-desk .menu-popover h3 { font-size:14px; margin:0; }
.chat-desk .menu-popover label { margin:0; font-size:11px; }
.chat-desk .menu-popover input,.chat-desk .menu-popover select { font-size:12px; }
.menu-popover .actions { gap:6px; }
.menu-popover th,.menu-popover td { font-size:11px; padding:7px; }
.chat-desk .chat-box { display:flex; flex-direction:column; flex:1; min-height:0; max-height:none; overflow-y:auto; border:0; border-radius:0; padding:24px clamp(16px,3vw,46px); background-color:#f7f3eb; background-image:radial-gradient(#d9cdb840 .7px,transparent .7px); background-size:18px 18px; gap:10px; }
.chat-desk .chat-line { max-width:82%; width:fit-content; padding:11px 14px 8px; margin:0; font-size:13px; border:1px solid #e0d6c3; border-radius:13px; box-shadow:0 2px 3px #58492605; }
.chat-desk .chat-line.me { align-self:flex-end; background:#edf6ef; border-color:#c5dbcb; border-bottom-right-radius:3px; }
.chat-desk .chat-line.them { align-self:flex-start; background:#fffdf9; border-bottom-left-radius:3px; }
.message-sender { color:#81734f; font-size:10px; font-weight:700; margin-bottom:5px; }
.message-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; }
.message-footer { display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-top:5px; color:#948775; font-size:9px; }
.chat-desk .chat-icon-btn { color:#88786b; background:transparent; border:0; box-shadow:none; width:auto; height:auto; min-width:0; font-size:9px; padding:2px; border-radius:3px; }
.chat-desk .chat-icon-btn:hover { color:#a52929; text-decoration:underline; }
.date-divider { align-self:center; background:#efe8d9; border:1px solid #e5dbc8; border-radius:6px; color:#8c7e64; font-size:10px; padding:4px 10px; margin:5px 0 10px; }
.thread-empty { margin:auto; text-align:center; max-width:300px; padding:28px 0; color:#93866c; }
.empty-symbol { display:inline-flex; width:64px; height:64px; align-items:center; justify-content:center; font-size:32px; border:1px solid #e2d4b6; background:#efe6d2; border-radius:20px; margin-bottom:18px; }
.chat-desk .thread-empty h3 { color:#796a4a; font-size:17px; margin:0 0 8px; }
.thread-empty p { font-size:12px; line-height:1.8; }
.composer { padding:16px 22px 11px; border-top:1px solid #e4dbcb; background:#fffdf9; flex-shrink:0; }
.composer-input { border:1px solid #dfd6c7; border-radius:11px; display:flex; align-items:center; background:#fff; padding:7px; gap:10px; }
.composer-input:focus-within { border-color:#b49b5f; box-shadow:0 0 0 2px #d6af3d15; }
.chat-desk .composer textarea { flex:1; min-width:0; resize:vertical; min-height:46px; max-height:130px; border:0; background:transparent; box-shadow:none; font-size:13px; padding:8px 7px; }
.chat-desk .send-button { padding:10px 17px; font-size:12px; border-radius:8px; }
.send-button span { margin-left:10px; font-size:17px; }
.composer-footer { display:flex; justify-content:space-between; gap:10px; margin-top:8px; min-height:16px; }
.composer-footer > span { font-size:9px; color:#9e917c; text-align:right; }
.chat-desk .composer-footer .status { margin:0; font-size:10px; }
.chat-desk .call-status { font-size:10px; margin:0; padding:5px 22px; color:#807359; background:#faf6ee; }
.chat-desk .call-status:empty { display:none; }
.call-notifications:empty { display:none; }
.call-notifications { flex-shrink:0; }
.incoming-banner { display:flex; align-items:center; gap:10px; padding:10px 16px; background:#fff5d7; border:1px solid #d6af3d; border-radius:10px; }
.incoming-banner p { flex:1; margin:0; }
.chat-desk .video-grid { max-height:190px; margin-top:8px; overflow:auto; }
.chat-desk .video-grid video { height:140px; width:100%; background:#252725; }
.chat-desk .icon-button { background:transparent; border:1px solid #ded5c7; box-shadow:none; padding:4px; width:32px; height:32px; font-size:20px; }
.chat-desk .back-to-list { display:none; }
.chat-desk .hidden,.chat-desk [hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.chat-desk button:focus-visible,.chat-desk summary:focus-visible { outline:2px solid #97751a; outline-offset:3px; }
@media (max-width:1200px) { .desk-workspace { grid-template-columns:155px 255px minmax(0,1fr); gap:9px; } .chat-desk .chat-shell { padding:10px; } .thread-header { padding:15px; } .rail-heading { padding-inline:3px; } .chat-desk .rail-tab { padding:10px 6px; font-size:11px; } }
@media (max-width:1000px) { .desk-workspace { grid-template-columns:260px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); } .desk-rail { grid-column:1/-1; flex-direction:row; align-items:center; padding:8px 14px; gap:12px; } .rail-heading { padding:0; margin-right:auto; } .rail-heading h1 { font-size:17px; margin:0; } .rail-heading .eyebrow,.rail-heading p,.rail-note,.desk-identity { display:none; } .chat-desk .rail-tab { margin:0; gap:10px; } .desk-list-panel { grid-column:1; } .desk-thread { grid-column:2; } }
@media (max-width:640px) { .chat-desk .chat-shell { padding:6px; gap:6px; min-height:440px; } .chat-desk .menu { flex-wrap:nowrap; overflow-x:auto; padding:8px; border-radius:9px; } .chat-desk .menu a,.chat-desk .menu button { flex-shrink:0; white-space:nowrap; } .chat-desk .menu .clockin-brand { margin-right:3px; padding-right:10px; } .chat-desk .brand-copy small { display:none; } .chat-desk .brand-logo { width:29px; height:28px; } .chat-desk .brand-copy strong { font-size:14px; } .desk-workspace { grid-template-columns:minmax(0,1fr); gap:6px; } .desk-rail { padding:9px; gap:6px; border-radius:10px; } .desk-list-panel,.desk-thread { grid-column:1; grid-row:2; border-radius:10px; } .desk-thread { display:none; } .desk-workspace.thread-open .desk-list-panel { display:none; } .desk-workspace.thread-open .desk-thread:not(.hidden) { display:flex; } .chat-desk .back-to-list { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } .thread-header { gap:8px; padding:12px; } .thread-header .avatar { width:32px; height:32px; font-size:11px; } .thread-title h2 { font-size:14px !important; } .thread-title p { font-size:10px; } .chat-desk .thread-actions button { padding:7px 9px; } .composer { padding:10px; } .composer-footer > span { display:none; } .chat-desk .chat-line { max-width:90%; } .chat-desk .chat-box { padding:15px; } }
/* Override the shared form defaults inside the compact desk controls. */
.chat-desk .send-button { width:auto; flex:0 0 auto; }
.chat-desk .composer textarea { width:0; flex:1 1 0; }
.chat-desk .thread-menu > summary { padding:0; margin:0; color:#6c604a; }
.chat-desk .thread-menu > summary::before { content:none; }
.chat-desk .text-button { width:auto; }
.chat-desk .call-status { font-weight:400; }
@media (max-width:1000px) { .chat-desk .rail-tab { width:auto; flex-shrink:0; } }
@media (max-width:640px) { .rail-heading h1 { white-space:nowrap; font-size:15px; } .chat-desk .rail-tab { font-size:10px; padding:9px 7px; gap:6px; } }

.recording-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:9px 16px; border:1px solid #d59a85; background:#fff0e9; border-radius:10px; font-size:12px; }
.recording-bar > span { flex:1; min-width:180px; }
.recording-bar button { width:auto; padding:7px 12px; font-size:12px; }
.recording-bar.is-recording > span::before { content:"● "; color:#c23525; }
.recordings-dialog { width:min(760px,calc(100vw - 24px)); max-height:85dvh; padding:24px; border:1px solid #d9cbb3; border-radius:16px; background:#fffdf9; color:#302a22; }
.recordings-dialog::backdrop { background:#191b1e80; }
.recordings-dialog header { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.recordings-dialog header h2 { margin:0 0 6px; font-size:20px; }
.recordings-dialog header p,.transcript-help { font-size:12px; color:#84765f; }
.recordings-dialog button { width:auto; font-size:12px; }
.recording-card { display:flex; gap:12px; align-items:center; border-top:1px solid #e4dbcb; padding:14px 0; }
.recording-card > div { flex:1; }
.recording-card strong,.recording-card small { display:block; }
.recording-card strong { font-size:13px; }
.recording-card small { color:#84765f; font-size:11px; margin-top:4px; }
#recordingDetail { margin-top:18px; border-top:1px solid #e4dbcb; padding-top:18px; }
#recordingPlayback { width:100%; margin-bottom:12px; }
#recordingTranscript { white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:13px; line-height:1.8; }
@media(max-width:640px) { .chat-desk .thread-actions { gap:4px; } .chat-desk .thread-actions button { font-size:10px; padding:7px 6px; } .thread-header { flex-wrap:wrap; } .thread-actions { margin-left:auto; } .recordings-dialog { padding:16px; } }

/* Docked call setup, with a responsive right-hand drawer on smaller screens. */
.desk-workspace.setup-open { grid-template-columns:155px 245px minmax(300px,1fr) 290px; }
.call-setup { min-width:0; min-height:0; display:flex; flex-direction:column; border:1px solid #ded5c7; border-radius:16px; background:#fffdf9; overflow:hidden; }
.setup-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px; border-bottom:1px solid #e6dfd3; }
.chat-desk .setup-heading h2 { font-size:19px; margin:5px 0 0; color:#393225; }
.setup-content { flex:1; min-height:0; overflow:auto; padding:18px; }
.setup-preview { position:relative; background:linear-gradient(135deg,#373b43,#20232b); aspect-ratio:16/10; border-radius:10px; overflow:hidden; color:#dbdce1; display:flex; align-items:center; justify-content:center; }
#setupPreviewPlaceholder { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:10px; }
#setupPreviewPlaceholder strong { font-size:11px; font-weight:500; }
#setupPreviewPlaceholder span { font-size:9px; color:#a9adb7; }
#setupPreview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
#setupPreviewName { position:absolute; bottom:8px; left:10px; font-size:9px; color:#f4f3f0; background:#0005; border-radius:4px; padding:2px 6px; }
.setup-media-toggles { display:flex; justify-content:center; gap:7px; padding:12px 0 17px; }
.chat-desk .setup-media-toggles button { width:auto; font-size:10px; padding:7px 12px; }
.chat-desk .setup-media-toggles button[aria-pressed=false] { background:#f8e7e1; border-color:#d9b4a8; color:#9b3b2c; }
.call-setup label { margin:10px 0 5px; font-size:11px; font-weight:500; color:#655c4d; }
.call-setup select,.call-setup input { padding:9px 10px; font-size:11px; background:#fff; }
.setup-section { border-top:1px solid #e7dfd1; padding-top:15px; margin-top:18px; }
.chat-desk .setup-section h3 { font-size:12px; color:#423b30; margin:0 0 10px; }
.setup-hint { font-size:10px; line-height:1.7; color:#8b806f; }
.setup-preview-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.chat-desk .setup-preview-actions button { width:auto; font-size:10px; padding:7px 9px; }
.call-setup .setup-section > button { font-size:11px; margin-top:7px; padding:8px 10px; }
.chat-desk .setup-delete { background:none; border:0; box-shadow:none; color:#a4493c; text-align:left; }
.setup-footer { padding:15px 18px; border-top:1px solid #e6dfd3; background:#faf7f0; }
.setup-footer > span { display:block; color:#84775f; font-size:10px; margin-bottom:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-desk #setupJoinCall { font-size:12px; padding:10px 12px; }
#setupJoinCall span { margin-left:10px; }
.setup-group-options { margin-top:18px; border-top:1px solid #e7dfd1; padding-top:14px; }
.setup-group-options summary { font-size:12px; padding:0; margin:0; color:#655839; }
.setup-group-options .actions { margin-top:12px; gap:6px; }
.setup-group-options button { font-size:10px; }
.setup-group-options td,.setup-group-options th { font-size:10px; padding:7px; }
.call-setup button:disabled,.call-setup select:disabled { cursor:not-allowed; }
@media (max-width:1250px) { .desk-workspace.setup-open { grid-template-columns:245px minmax(280px,1fr) 280px; grid-template-rows:auto minmax(0,1fr); } .setup-open .desk-rail { grid-column:1/-1; flex-direction:row; align-items:center; padding:8px 14px; gap:12px; } .setup-open .rail-heading { padding:0; margin-right:auto; } .setup-open .rail-heading h1 { font-size:17px; margin:0; } .setup-open .rail-heading .eyebrow,.setup-open .rail-heading p,.setup-open .rail-note,.setup-open .desk-identity { display:none; } .chat-desk .setup-open .rail-tab { width:auto; margin:0; gap:10px; } .setup-open .desk-list-panel { grid-column:1; } .setup-open .desk-thread { grid-column:2; } .setup-open .call-setup { grid-column:3; grid-row:2; } }
@media (max-width:1000px) { .desk-workspace.setup-open { grid-template-columns:260px minmax(0,1fr); } .call-setup { position:fixed; z-index:40; top:10px; bottom:10px; right:10px; width:min(340px,calc(100vw - 20px)); box-shadow:-20px 0 70px #191b1e45; } }
@media (max-width:640px) { .desk-workspace.setup-open { grid-template-columns:minmax(0,1fr); } .setup-open .desk-thread { grid-column:1; } .setup-open .rail-heading h1 { font-size:15px; } .chat-desk .setup-open .rail-tab { gap:6px; } }

.media-tools { display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap; }
.chat-desk .media-tools button,.chat-desk .voice-recording button,.chat-desk .media-draft-actions button { width:auto; padding:6px 10px; font-size:12px; }
.media-tools > span { font-size:10px; color:#777; }
.media-preview { display:flex; flex-direction:column; gap:7px; padding:9px; margin-bottom:8px; background:#f3f2eb; border-radius:8px; max-height:230px; overflow:auto; font-size:12px; }
.media-preview[hidden],.voice-recording[hidden] { display:none; }
.media-preview img,.media-preview video { max-height:120px; max-width:100%; object-fit:contain; align-self:flex-start; }
.media-preview audio,.message-attachment audio { max-width:100%; width:280px; height:40px; }
.media-draft-actions,.voice-recording { display:flex; gap:8px; align-items:center; }
.voice-recording { color:#b42336; margin:8px 0; font-size:12px; }
.message-attachment { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin:8px 0; max-width:100%; }
.message-attachment img,.message-attachment video { max-width:100%; max-height:300px; border-radius:8px; }
.message-attachment small,.message-attachment a { font-size:11px; }
.message-attachment .attachment-error { color:#b42336; font-size:12px; }
@media(max-width:640px) { .media-tools > span { display:none; } .media-preview { max-height:170px; } .media-preview img,.media-preview video { max-height:80px; } }

@media(max-width:640px) { .desk-rail { flex-wrap:wrap; } .desk-rail .rail-heading { width:100%; } .desk-rail .rail-tab { flex:1; justify-content:center; padding:8px 5px; font-size:11px; } }