/*!
 * Osra AI — osra-ui-v8.css | Sprint 2: طبقة الواجهة الأنيقة
 * CSS فقط: لا يعدل DOM ولا يستهدف hydration — يُحمَّل بعد أنماط التطبيق فيكسب الأولوية.
 */
:root{
  --osra-ease:cubic-bezier(.22,.61,.36,1);
  --osra-focus:rgba(61,125,251,.25);
}
html{scroll-behavior:smooth}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(61,125,251,.22)}
:focus-visible{outline:2px solid var(--osra-send,#3d7dfb);outline-offset:2px}

/* شريط تمرير رقيق أنيق */
*{scrollbar-width:thin;scrollbar-color:rgba(125,135,155,.32) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(125,135,155,.30);border-radius:999px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background-color:rgba(125,135,155,.48)}

/* الشاشة الافتتاحية بهوية أوسرا */
.animate-spin.rounded-full{border-color:rgba(61,125,251,.22);border-top-color:var(--osra-send,#3d7dfb)}

/* دخول ناعم للرسائل الجديدة */
.message{animation:osra-msg-in .4s var(--osra-ease) both}
@keyframes osra-msg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* فقاعات ونصوص الرسائل */
.message-content{transition:box-shadow .25s var(--osra-ease)}
.message-text{line-height:1.85;word-break:break-word}
.message-text a{text-underline-offset:3px;text-decoration-thickness:1px}
.message-image{border-radius:14px}
.messages-area{overscroll-behavior:contain}

/* أزرار العمل على الرسائل والأيقونات: استجابة لمسية دقيقة */
.message-action-btn,.icon-button,.conv-action,.menu-item,.tool-row{
  transition:background-color .18s ease,color .18s ease,transform .18s var(--osra-ease),box-shadow .2s ease
}
.message-action-btn:hover,.icon-button:hover,.conv-action:hover{transform:translateY(-1px)}
.message-action-btn:active,.icon-button:active,.modal-button:active,.option-chip:active{transform:scale(.95)}

/* الترويسة وزر محادثة جديدة */
.header-logo{transition:opacity .2s ease}
.header-logo:hover{opacity:.85}
.new-chat-btn{transition:box-shadow .25s var(--osra-ease),transform .2s var(--osra-ease)}
.new-chat-btn:hover{box-shadow:0 8px 24px rgba(61,125,251,.30)}
.new-chat-btn:active{transform:scale(.97)}

/* الرقائق (chips) */
.option-chip{transition:transform .18s var(--osra-ease),box-shadow .2s ease,background-color .18s ease}
.option-chip:hover{transform:translateY(-1px)}

/* النوافذ المنبثقة: ظهور هادئ */
.modal-overlay{animation:osra-fade .25s ease both}
.modal{animation:osra-pop .34s var(--osra-ease) both}
@keyframes osra-fade{from{opacity:0}to{opacity:1}}
@keyframes osra-pop{from{opacity:0;transform:translateY(16px) scale(.965)}to{opacity:1;transform:none}}

/* قائمة النماذج */
.model-list{animation:osra-drop .22s var(--osra-ease) both}
@keyframes osra-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* كتل الشيفرة */
.code-block-wrapper{border-radius:14px;overflow:hidden}
.code-copy-btn{transition:background-color .18s ease,color .18s ease}
.code-copy-btn:hover{filter:brightness(1.12)}

/* حقول الإدخال: هالة تركيز ناعمة بلون العلامة */
textarea,input[type="text"]{transition:border-color .2s ease,box-shadow .25s var(--osra-ease)}
textarea:focus,input[type="text"]:focus{box-shadow:0 0 0 4px var(--osra-focus)}

/* انتقال سلس بين الوضع الفاتح والداكن */
body,.modal,.message-content{transition-property:background-color,color,border-color;transition-duration:.25s}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}