/* Shared visual language with AI Influencer Studio. */
:root{--violet:#d4f312;--violet-2:#a8c40e;--violet-soft:#242b12;--ink:#ececec;--muted:#92929d;--line:#2a2a30;--bg:#0c0c0e;--card:#151517;--shadow:none}
body{background:var(--bg);font-family:Inter,system-ui,sans-serif;color:var(--ink)}
.topbar{display:none}.site-header{max-width:1440px;padding:22px 28px;border-bottom:1px solid var(--line)}
.brand-logo{background:var(--violet);color:#0c0c0e;box-shadow:none;border-radius:9px}.brand-name{font-size:19px;letter-spacing:.3px}.brand-sub{margin-top:5px}
.layout{max-width:1440px;gap:20px;padding-top:24px}.panel{box-shadow:none}
.app-groups,.app-tabs{max-width:1440px;padding-left:28px;padding-right:28px;gap:8px}
.app-group,.app-tab{background:#151517;color:#aaaab4;border:1px solid var(--line);border-radius:9px;padding:10px 15px;font-size:13px;box-shadow:none;font-weight:600}
.app-group.active,.app-tab.active{background:#242b12;color:#d4f312;border-color:#5e6d20;box-shadow:none;transform:none}.app-tabs{margin-bottom:12px}
.input,.btn-ghost,.logout-btn,.status-pill,.tabs,.rtabs,.tab.active,.rtab.active{background:#1d1d21;color:var(--ink)}
.btn-primary{background:#d4f312;color:#0c0c0e;box-shadow:0 3px 0 #a8c40e}.btn-primary:hover{box-shadow:0 3px 0 #a8c40e}
.crop-area,.prompt-tool{background:var(--card)}.status-pill.live{background:#192819;color:#a3da9c;border-color:#314532}
/* Older tools use some literal light panel backgrounds. Preserve image/canvas surfaces. */
.app-view :is(div,section,details,label)[style*="background:#fff"],.app-view :is(div,section,details,label)[style*="background: #fff"],.app-view :is(div,section,details,label)[style*="background:#fdf"],.app-view :is(div,section,details,label)[style*="background:#f8"]{background-color:var(--card)!important}
#view-chatcontent{max-width:1440px;margin:auto;padding:28px}
.cc-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.cc-eyebrow{font-size:11px;letter-spacing:2px;color:var(--violet);font-weight:700}.cc-heading h1{font-size:28px;margin:9px 0}.cc-heading p{font-size:13px;color:var(--muted);margin:0;line-height:1.7}
.cc-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.cc-grid{display:grid;grid-template-columns:340px minmax(320px,1fr) 280px;gap:18px;align-items:start}
.cc-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}.cc-panel h2{font-size:14px;margin:0 0 18px}.cc-step{color:var(--violet);font-size:11px;margin-right:9px}.cc-panel label{font-size:12px;color:#bdbdc5;display:block;margin:14px 0 7px}.cc-panel .input{font-size:13px;padding:10px}.cc-row{display:flex;gap:10px}.cc-row>*{flex:1;min-width:0}.cc-panel input[type=checkbox]{accent-color:var(--violet)}.cc-panel label.cc-check{display:flex;align-items:center;gap:8px}
.cc-stage{border:1px solid var(--line);border-radius:16px;background-color:#101113;background-image:radial-gradient(#27272c 1px,transparent 1px);background-size:18px 18px;padding:20px;min-width:0}
.cc-stage-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#a1a1aa;margin-bottom:18px;letter-spacing:1px}.cc-canvas-wrap{max-width:450px;margin:auto;box-shadow:0 15px 50px #0005;line-height:0}.cc-canvas-wrap canvas{display:block;width:100%;height:auto;border-radius:5px}.cc-preview-note{color:var(--muted);font-size:11px;text-align:center;line-height:1.7;margin:16px 0 0}
.cc-slides{display:flex;gap:7px;overflow:auto;margin-bottom:18px;padding-bottom:3px}.cc-slide{min-width:58px;border-radius:8px;padding:10px;border:1px solid var(--line);background:#1d1d21;color:#aaa;cursor:pointer}.cc-slide.active{color:#d4f312;border-color:#d4f312;background:#242b12}
.cc-message{border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0;background:#1d1d21;cursor:pointer}.cc-message.active{border-color:#a8c40e}.cc-message p{margin:6px 0 10px;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.cc-message small{font-size:10px;color:var(--muted)}.cc-message .cc-actions{gap:5px}.cc-message button{border:1px solid #393940;color:#bbb;background:transparent;border-radius:5px;padding:3px 7px;cursor:pointer}.cc-list{max-height:620px;overflow:auto}.cc-notice{font-size:12px;color:#b4c27c;min-height:18px;line-height:1.5;margin-top:12px}.cc-notice.error{color:#ffab9e}.cc-media-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.cc-media-thumbs img{width:55px;height:55px;object-fit:cover;border-radius:6px}.cc-file{max-width:100%;font-size:11px;color:#aaa}.cc-empty{color:#888;font-size:13px;line-height:1.7}
@media(max-width:1180px){.cc-grid{grid-template-columns:310px 1fr}.cc-grid>.cc-panel:last-child{grid-column:1/-1}.cc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:320px}}@media(max-width:760px){#view-chatcontent{padding:18px}.cc-heading{align-items:start;flex-direction:column}.cc-grid{grid-template-columns:1fr}.cc-grid>.cc-panel:last-child{grid-column:auto}.cc-list{display:block}.cc-stage{order:-1}.site-header{padding:16px;flex-wrap:wrap;gap:14px}.app-groups,.app-tabs{padding:0 16px}}
#view-chatcontent [hidden]{display:none!important}
.result-tabs,.side-switch,.text-tool{background:#1d1d21}.tab.active,.rtab.active,.side-btn.active{background:#292d1d;color:#d4f312;box-shadow:none}
.result-stage{background-color:#19191d;background-image:linear-gradient(45deg,#222227 25%,transparent 25%),linear-gradient(-45deg,#222227 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#222227 75%),linear-gradient(-45deg,transparent 75%,#222227 75%)}
.spinner{background:#101014dd}#navDrawer{background:#151517;color:#ececec}.cc-file::file-selector-button{background:#28282e;border:1px solid #393940;color:#ddd;border-radius:7px;padding:7px 9px;margin-right:8px;cursor:pointer}
/* KOL Content hội thoại setup: editable script on left, persistent preview on right. */
.cc-grid{grid-template-columns:minmax(0,410px) minmax(0,1fr);gap:24px}
.cc-left-stack{display:flex;flex-direction:column;gap:18px;min-width:0}.cc-panel h2{display:flex;justify-content:space-between;align-items:center}.cc-panel h2 small{font-size:10px;font-weight:400;color:var(--muted)}
.cc-avatar-preview{width:48px;height:48px;border-radius:50%;background:#d4f31220;color:#d4f312;display:grid;place-items:center;overflow:hidden;font-size:24px;margin-bottom:12px}.cc-avatar-preview img{width:100%;height:100%;object-fit:cover}
.cc-stage{position:sticky;top:20px;background:#151517;padding:0;overflow:hidden}.cc-stage-head{padding:18px 20px;margin:0;border-bottom:1px solid var(--line)}.cc-canvas-wrap{margin:22px auto;max-width:430px;width:calc(100% - 40px)}
.cc-preview-footer{border-top:1px solid var(--line);padding:20px;margin-top:18px}.cc-preview-footer>.btn-primary{width:100%;margin-top:14px}.cc-preview-nav{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.cc-slides{margin-bottom:22px}.cc-slide{white-space:nowrap;padding:11px 15px}.cc-slide span{margin-left:7px}.cc-list{max-height:none;overflow:visible;display:block}.cc-message{cursor:default;background:#111113;padding:14px;margin:14px 0}.cc-message-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.cc-message-kind{margin:10px 0}.cc-message .cc-check{font-size:11px;margin-bottom:0}.cc-message .cc-file{display:block;margin-top:10px}.cc-message .cc-row input[type=time]{flex:0 0 105px}.cc-inline-add{margin:16px 0}.cc-inline-add button{justify-content:center}.cc-message .cc-media-thumbs>div{position:relative}.cc-message .cc-media-thumbs button{position:absolute;right:0;top:0;background:#000c;border:0;color:white}.cc-message .cc-media-thumbs img{width:75px;height:75px}button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:900px){.cc-grid{grid-template-columns:minmax(0,350px) minmax(0,1fr)}.cc-heading h1{font-size:25px}}
@media(max-width:700px){.cc-grid{grid-template-columns:1fr}.cc-stage{position:static;order:0}.cc-left-stack{order:1}.cc-heading h1{font-size:25px}}
@media(min-width:701px){.cc-canvas-wrap{width:min(calc(100% - 40px),430px,calc((100vh - 270px) * var(--cc-aspect,.5625)));margin:16px auto}.cc-preview-note{margin:8px 0}.cc-preview-footer{margin-top:12px;padding:14px 20px}.cc-preview-footer .cc-notice:empty{display:none}}
#view-assistant{max-width:1360px;margin:auto;padding:28px}.sa-layout{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}.sa-layout aside p{font-size:13px;line-height:1.8;color:#aaa}.sa-chat{min-width:0}.sa-messages{height:52vh;min-height:300px;overflow:auto;padding:4px 10px 18px}.sa-bubble{max-width:90%;padding:16px;border:1px solid var(--line);border-radius:14px;margin:14px 0;background:#1d1d21}.sa-bubble.user{margin-left:auto;background:#242b12}.sa-bubble small{font-size:10px;color:#9da786;letter-spacing:1px}.sa-bubble p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.8;margin:7px 0}.sa-welcome{text-align:center;padding:50px 10px;color:#d4f312;font-size:34px}.sa-welcome h2{font-size:22px;color:#eee}.sa-welcome p{font-size:13px;color:#999}.sa-suggestions{display:flex;gap:8px;flex-wrap:wrap}.sa-suggestions button{background:#1d1d21;color:#bbb;border:1px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer}.sa-compose{display:flex;align-items:center;gap:12px;margin-top:12px}.sa-compose>span{flex:1;font-size:11px;color:#a0a08c}.sa-compose label{cursor:pointer}#sa-attachments{display:flex;gap:8px;margin-top:12px}#sa-attachments>div{position:relative}#sa-attachments img{width:65px;height:65px;object-fit:cover;border-radius:8px}#sa-attachments button{position:absolute;top:0;right:0;background:#000b;color:white;border:0;cursor:pointer}@media(max-width:760px){.sa-layout{grid-template-columns:1fr}.sa-layout aside{display:none}#view-assistant{padding:16px}.sa-bubble{max-width:100%}}

/* Content Zalo: readable editing surface and compact project controls. */
#view-chatcontent .cc-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:24px;align-items:start}
#view-chatcontent .cc-heading{align-items:center;margin-bottom:22px}
#view-chatcontent .cc-heading h1{font-size:30px;letter-spacing:-.8px;margin:6px 0}
#view-chatcontent .cc-heading p{font-size:14px;color:#b3b3be;line-height:1.6}
#view-chatcontent .cc-panel{padding:22px;border-color:#36363e}
#view-chatcontent .cc-panel h2{font-size:18px;margin-bottom:18px}
#view-chatcontent .cc-settings{border:1px solid #36363e;border-radius:14px;background:#1b1b20}
#view-chatcontent .cc-settings>summary{padding:18px 20px;cursor:pointer;font-size:15px;font-weight:600}
#view-chatcontent .cc-settings>summary small{display:block;margin:7px 0 0 17px;font-size:12px;color:#aaaab6;font-weight:400}
#view-chatcontent .cc-settings .cc-panel{border:0;border-top:1px solid #36363e;border-radius:0 0 14px 14px}
#view-chatcontent .cc-panel label{font-size:13px;color:#c9c9d2}
#view-chatcontent .input{font-size:14px;min-height:43px;border:1px solid #454550;border-radius:9px;padding:11px 12px}
#view-chatcontent .input:focus{outline:2px solid #d4f312;outline-offset:2px}
#view-chatcontent .hint{font-size:12px;color:#aaaab5;line-height:1.6}
#view-chatcontent .cc-message{padding:18px;margin:16px 0;background:#202127;border:1px solid #41424c;border-left:3px solid #a4aab7;border-radius:12px}
#view-chatcontent .cc-message-out{border-left-color:#81c9e7;background:#1c272e}
#view-chatcontent .cc-message-head small{font-size:12px;color:#f1f1f5;display:flex;align-items:center;gap:7px;font-weight:650}
#view-chatcontent .cc-message-number{color:#b2b5c0;font-weight:400}
#view-chatcontent .cc-sender-dot{width:7px;height:7px;border-radius:50%;background:#bdc2cf}
#view-chatcontent .cc-message-out .cc-sender-dot{background:#81c9e7}
#view-chatcontent .cc-message textarea.input{background:#f6f7fa;color:#202735;border-color:#d6dae3;font-size:16px;line-height:1.65;min-height:108px;resize:vertical;box-sizing:border-box}
#view-chatcontent .cc-message-out textarea.input{background:#e2f3fb}
#view-chatcontent .cc-message .cc-actions button{min-width:32px;min-height:32px;font-size:13px;border:1px solid #454650;border-radius:7px;color:#e0e1e8;background:#2b2c33;padding:5px 9px}
#view-chatcontent .cc-message-options{margin-top:14px;color:#b6bac7;font-size:12px}
#view-chatcontent .cc-message-options summary{cursor:pointer;padding:4px 0}
#view-chatcontent .cc-message-options .cc-check{font-size:13px;margin:12px 0 3px}
#view-chatcontent input[type=checkbox]{width:16px;height:16px;accent-color:#d4f312}
#view-chatcontent .cc-file{width:100%;font-size:12px;color:#bfc2cc}
#view-chatcontent .cc-file::file-selector-button{border:1px solid #555965;background:#30333d;color:#fff;padding:10px 12px;border-radius:7px;margin-right:10px;cursor:pointer}
#view-chatcontent .cc-media-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
#view-chatcontent .cc-media-thumbs img{width:100px;height:100px;border-radius:8px;object-fit:cover}
#view-chatcontent .cc-media-thumbs button{width:24px;height:24px;border-radius:50%;cursor:pointer}
#view-chatcontent .cc-inline-add{position:sticky;bottom:12px;background:#202127;border:1px solid #454650;border-radius:12px;padding:10px;box-shadow:0 5px 20px #0005;z-index:1}
#view-chatcontent .cc-inline-add button{min-height:42px;font-size:14px;font-weight:600}
#view-chatcontent #cc-add-shop{background:#233b47;color:#bce9ff;border-color:#446777}
#view-chatcontent .cc-stage{border-color:#3a3b45;background:#1d1e24}
#view-chatcontent .cc-stage-head{font-size:12px;color:#d0d1da;letter-spacing:.5px;padding:18px}
#view-chatcontent .cc-preview-note{font-size:12px;color:#b3b5c2;line-height:1.6}
#view-chatcontent .cc-preview-footer{background:#17181d}
#view-chatcontent .cc-slide{font-size:13px;min-height:44px;border-color:#42434d;color:#c3c5cf}
#view-chatcontent .cc-slide.active{color:#e1fb69;border-color:#a1b837;background:#2a3317}
#view-chatcontent summary:focus-visible,#view-chatcontent button:focus-visible{outline:2px solid #d4f312;outline-offset:3px}
@media(max-width:800px){#view-chatcontent .cc-grid{grid-template-columns:1fr}#view-chatcontent .cc-stage{position:static;order:1}#view-chatcontent .cc-left-stack{order:0}#view-chatcontent .cc-heading{align-items:flex-start;flex-direction:column}#view-chatcontent .cc-canvas-wrap{width:calc(100% - 36px);max-width:400px}#view-chatcontent .cc-panel{padding:16px}#view-chatcontent .cc-message{padding:14px}}

#view-chatcontent .cc-inline-add{position:static;box-shadow:none;margin:16px 0}