:root { --radius-md:14px; --radius-sm:8px; --radius-pill:999px; --page-bg:#f8f6fc; --surface:#fff; --line:#ded8ee; --purple-soft:#eee9fa; --purple-soft-border:#cfc5ea; --purple-primary:#4b2e83; --purple-mid:#7a67c7; --text:#272334; --muted:#6b657a; }
* { box-sizing:border-box; } [hidden] { display:none!important; }
body { margin:0; padding:32px 24px; background:var(--page-bg); color:var(--text); font:16px/1.5 Arial,sans-serif; }
.workspace { display:grid; grid-template-columns:560px 380px; gap:48px; align-items:start; max-width:988px; margin:auto; }
.writing-pane { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:12px; min-width:0; min-height:700px; height:clamp(700px,calc(100dvh - 56px),820px); display:flex; flex-direction:column; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.brand { font-size:15px; color:var(--purple-primary); } .phase-pill { background:var(--purple-soft); color:var(--purple-primary); font-size:11px; font-weight:700; border-radius:var(--radius-pill); min-width:116px; padding:3px 8px; text-align:center; }
.prompt-card { position:relative; border:1px solid var(--line); border-radius:var(--radius-md); min-height:69px; padding:8px 52px 8px 16px; display:flex; align-items:center; margin-bottom:16px; }
h1 { margin:0; font-size:18px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; } .prompt-card button { position:absolute; right:8px; top:50%; transform:translateY(-50%); }
button { font:inherit; cursor:pointer; color:var(--text); border:1.5px solid var(--purple-soft-border); border-radius:var(--radius-md); background:var(--purple-soft); padding:8px 10px; }
#support-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:12px; } #support-buttons button { min-height:40px; font-size:13px; font-weight:600; } #support-buttons button[aria-pressed="true"] { border-color:var(--purple-primary); color:var(--purple-primary); }
.writing-card { display:flex; flex:1; flex-direction:column; min-height:0; } .writing-card h2 { font-size:18px; margin:0 0 10px; } .writing-surface { position:relative; display:flex; flex:1; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.writing-surface:focus-within { border-color:var(--purple-mid); box-shadow:0 0 0 2px color-mix(in srgb,var(--purple-mid) 16%,transparent); }
textarea { width:100%; min-width:0; min-height:0; flex:1; resize:none; border:0; padding:16px 78px 16px 20px; font:16px/1.6 Arial,sans-serif; color:var(--text); background:var(--surface); } textarea:focus { outline:none; }
.writing-toolbar { position:absolute; right:10px; top:10px; display:flex; gap:8px; } .icon-button { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:4px; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--purple-primary); } svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } button:hover { border-color:var(--purple-mid); } button:disabled { opacity:.45; cursor:default; } button[aria-pressed="true"].icon-button { background:var(--purple-primary); color:white; } :focus-visible { outline:3px solid var(--purple-mid); outline-offset:2px; }
footer { min-height:54px; display:flex; gap:8px; align-items:center; justify-content:space-between; } #shell-status { font-size:13px; color:var(--muted); margin:8px 0; } .quiet { background:transparent; font-size:13px; margin-left:auto; }
.support-card { position:relative; background:var(--surface); border:.5px solid var(--line); border-radius:var(--radius-md); padding:32px 16px 16px; display:grid; gap:12px; min-width:0; } .support-card h2 { margin:0; font-size:15px; } #support-content { overflow-wrap:anywhere; } #support-content p { color:var(--muted); font-size:13px; line-height:1.35; margin:0; } #support-content img { display:block; max-width:100%; border-radius:var(--radius-md); } .close-button { position:absolute; top:10px; right:10px; width:32px; height:32px; border:.5px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); color:var(--muted); font-size:18px; font-weight:700; padding:0; }
@media(min-width:761px) and (max-width:1040px) { .workspace { grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr); gap:24px; } }
@media(max-width:760px) { body { padding:14px; } .workspace { grid-template-columns:minmax(0,1fr); gap:24px; } .writing-pane { height:auto; min-height:700px; } .writing-surface { min-height:420px; } }
@media(pointer:coarse) { .icon-button { width:44px; height:44px; } textarea { padding-right:114px; } .prompt-card { padding-right:64px; } .close-button { width:44px; height:44px; } .support-card { padding-top:58px; } }